快速配置VSCode开发界面

下载地址

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的格式规则需要按着相应的规则写，点击左下角设置按钮后，在自定义设置中添加如下：

// 将设置放入此文件中以覆盖默认设置
// 解决MAC环境中CPU高占用的问题
{
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "**/tmp": true,
    "**/node_modules": true,
    "**/bower_components": true,
    // "**/dist": true
  },
  "files.watcherExclude": {
      "**/.git/objects/**": true,
      "**/.git/subtree-cache/**": true,
      "**/node_modules/**": true,
      "**/tmp/**": true,
      "**/bower_components/**": true,
      // "**/dist/**": true
  },
  // 皮肤
  "workbench.colorTheme": "Monokai",
  // 窗口失去焦点自动保存
  "files.autoSave": "onFocusChange",
  // 编辑粘贴自动格式化
  "editor.formatOnPaste": false,
  // 控制字体系列。
  "editor.fontFamily": "pingfang,Menlo, Monaco, 'Courier New', monospace",
  // 字体大小
  "editor.fontSize": 12,
  // 行高
  "editor.lineHeight": 17,
  // 通过使用鼠标滚轮同时按住 Ctrl 可缩放编辑器的字体
  // 窗口失去焦点自动保存
  // 通过使用鼠标滚轮同时按住 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": "vscode-typescript",
  // 启用或禁用 JavaScript 文件的语义检查。
  "javascript.implicitProjectConfig.experimentalDecorators": true,
  // 控制在差异编辑器中是否把前导空格或尾随空格的改动显示为差异
  "diffEditor.ignoreTrimWhitespace": false,
  // 启用或禁用在 VS Code 中重命名或移动文件时自动更新 import 语句的路径。
  "typescript.updateImportsOnFileMove.enabled": "always",
  // 控制是否在搜索中跟踪符号链接。解决VSCode启动后CPU高占用问题
  "search.followSymlinks": false
}

升级到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，根据铅笔中对应选项进行设置。

image.png