vscode eslint 自动格式化代码风格

vscode 中使用 eslint 规范格式化代码风格，首页先安装了eslint 的 依赖，在package.json文件中有相关的 eslint 的配置信息。
例如如下依赖：

"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0"

上面说的是一个前提，下面来说一下具体的配置步骤：

首先，在我们项目跟目录添加.eslintrc.js 文件，用于校验代码，编写eslint相关规则，关于eslint的一些具体规则，请查看eslint文档

本项目基本规范是依托于 vue 官方的 eslint 规则 eslint-config-vue 做了少许的修改。

你也可以进行一些属于你自己的定制，例如：目前使用缩进是2个空格，假如你觉得4个更顺眼，你可以如下修改

'indent': [4, 4, {
      'SwitchCase': 2 // 针对switch case的缩进
}]

其次，vscode中添加eslint和vetur插件：

如下图

12312121231.png

安装好了之后，会自动根据你上面配置的规则进行代码检查，不合格的会高亮显示，如下图：

41499828-d11fb97c-71b9-11e8-993c-0abb0b2a4a83.png

自动格式化设置，

1、window电脑：
文件 > 首选项 > 设置 打开 VSCode 配置文件
2、mac电脑
code>首选项 >设置

我的设置如下：

{
  "editor.tabSize": 2,
  "files.associations": {
      "*.vue": "vue"
  },
  "eslint.autoFixOnSave": true,
  "eslint.options": {
      "extensions": [
          ".js",
          ".vue"
      ]
  },
"eslint.validate": [
    "javascript",{
        "language": "vue",
        "autoFix": true
    },"html",
    "vue"
],
  "search.exclude": {
      "**/node_modules": true,
      "**/bower_components": true,
      "**/dist": true
  },
  "emmet.syntaxProfiles": {
      "javascript": "jsx",
      "vue": "html",
      "vue-html": "html"
  },
  "git.confirmSync": false,
  "window.zoomLevel": 0,
  "editor.renderWhitespace": "boundary",
  "editor.cursorBlinking": "smooth",
  "editor.minimap.enabled": true,
  "editor.minimap.renderCharacters": false,
  "editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
  "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
  "editor.codeLens": true,
  "editor.snippetSuggestions": "top",
}

这样，你就可以保存自动按照配置格式化代码了，体验如下：

41499956-0f23bd34-71bc-11e8-88b3-c2f5021c0680.gif

关闭eslint检查

关于关闭eslint，设置方法如下：
1、vue create的项目
在vue.config.js中

lintOnSave: false

2、以前的项目，vue init webpack的
config/index.js 文件。 将

useEslint: true

设置为

useEslint: false

文章转自：https://www.haorooms.com/post/vscode_eslint