VSCode中配置 vue.js 开发 （eslint，vetu

前几天写了一篇 http://www.jianshu.com/p/84539693dc02 的文章，自己使用中关于代码格式始终和eslint的standard有出入，无奈入了vscode，配置使用效果还不错，目前唯一的问题就是vscode中继承的SVN不是很给力（不要问我为啥不用Git）。

下载地址

https://code.visualstudio.com/Download

安装插件

• Auto Close Tag
• Auto Rename Tag
• Debugger for Chrome
• ESLint
• HTML Snippets
• Open in Browser
• Partial Diff
• Path Autocomplete
• Project Manager
• Sass
• Sass Formatter
• Vetur

项目中安装 eslint-vue 插件
npm install --save-dev eslint eslint-plugin-vue
参考链接文档

编辑器配置

其中关于字体大小、行高等配置可以自定义，关于vue、eslint的格式规则需要按着相应的规则写，点击左下角设置按钮后，在自定义设置中添加如下：

// 将设置放入此文件中以覆盖默认设置
{
  // 皮肤
  "workbench.colorTheme": "Monokai",
  // 命令行工具
  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  // 窗口失去焦点自动保存
  "files.autoSave": "onFocusChange",
  // 编辑粘贴自动格式化
  "editor.formatOnPaste": false,
  // 控制字体系列。
  "editor.fontFamily": "pingfang,Menlo, Monaco, 'Courier New', monospace",
  // 字体大小
  "editor.fontSize": 14,
  // 行高
  "editor.lineHeight": 17,
  // 通过使用鼠标滚轮同时按住 Ctrl 可缩放编辑器的字体
  "editor.mouseWheelZoom": true,
  // 行太长自动换行
  "editor.wordWrap": "on",
  // eslint设置
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // 保存自动修复
  "eslint.autoFixOnSave": true,
  // tab锁紧
  "editor.tabSize": 2,
  // 空格变成......
  "editor.renderWhitespace": "all",
  // formatter for <script> region
  "vetur.format.defaultFormatter.js": "none",
  "javascript.implicitProjectConfig.experimentalDecorators": true,
  "window.zoomLevel": 1.3,
  "tslint.autoFixOnSave": true
}

升级到1.19.0 (1.19.0)的童鞋可以尝试设置javascript.implicitProjectConfig.experimentalDecorators去掉template红线警告

 // 对不属于任何工程的 JavaScript 文件启用或禁用 "experimentalDecorators" 设置。现有的 jsconfig.json 或
 //  tsconfig.json 文件会覆盖此设置。要求 TypeScript >=2.3.1。

npm包安装

全局安装eslint

npm install eslint -g

测试

打开eslint配置的项目，打开js文件，在根据设置规则修改代码，查看代码是否报错。若eslint功能无效，点击查看、输出查看报错项，在命令行中 全局 安装对应项即可。

最近看到越来越多人看到这篇文章，唯恐更新不够及时误导各位，所以有问题的地方各位还请去参考当前版本。具体如下：

在设置页面 1 处搜索想要配置的插件，找对对应项 2，根据铅笔中对应选项进行设置。

更新日期：2018-05-16