VS Code配置初探

之前一直在用 Webstorm，看现在 VS Code 热度那么高，想着尝试一下。

熟悉编辑器的快捷键

VS Code 快捷键一览

安装使用到的插件

Chinese（修改你的编辑器语言，默认英文）
ESLint（代码规范和错误检查工具）
Prettier（代码格式化工具）
EditorConfig for VS Code（定义项目的编码规范，编辑器的行为会与.editorconfig 文件中定义的一致，并且其优先级比编辑器自身的设置要高，这在多人合作开发项目时十分有用而且必要）
Vetur（识别 vue 文件）
Syncing（同步你的 VS Code 配置，在另一台机器使用可以自动同步配置，不需要重新慢慢配了）
Manta's Stylus Supremacy（使得 stylus 格式化更好看）

当然大家可以自由选择，不需要和我一样

配置设置

打开文件->首选项->设置
右上角有个{}标识，点击打开settings.json文件
把下面这一段拷贝进去，保存文件，ok

{
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // #每次保存的时候自动格式化
  "editor.formatOnSave": true,
  // #每次保存的时候将代码按eslint格式进行修复
  "eslint.autoFixOnSave": true,
  // 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  //  #让prettier使用eslint的代码格式进行校验
  "prettier.eslintIntegration": true,
  //  #去掉代码结尾的分号
  "prettier.semi": false,
  //  #使用带引号替代双引号
  "prettier.singleQuote": true,
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #这个按用户自身习惯选择
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // #vue组件中html代码格式化样式
    }
  },
  // 格式化stylus, 需安装Manta's Stylus Supremacy插件
  "stylusSupremacy.insertColons": false, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": false, // 是否插入分好
  "stylusSupremacy.insertBraces": false, // 是否插入大括号
  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": false, // 两个选择器中是否换行
  "editor.fontSize": 13, // 设置字号
  "files.autoSave": "onFocusChange" // 在失去焦点时自动保存文件
}

把配置上传到 github

前提是要安装Syncing插件，具体的配置步骤在这。

今后在另一台机器使用可以自动同步配置，不需要重新慢慢配了。