关于VsCode 插件Eslint的使用和配置以及为什么不生效的解决办法

前言

我们在写代码的时候，对格式有着一定的格式要求，尤其是上班之后，如果大家的格式不能统一，就会造成代码每次更新都会大变样。使用vs的时候有一款插件可以帮助我们一键格式化代码。

步骤如下

1：在vs中安装插件

2：在vs中全局或者局部安装eslint

3：配置初始化文件

一般在创建项目的时候在根目录就会有.eslintrc.js和.eslintignore文件，如果没有可以自行创建，然后在其中键入以下内容：
.eslintrc.js

// https://eslint.org/docs/user-guide/configuring

module.exports = {
     
  root: true,
  parserOptions: {
     
    parser: 'babel-eslint'
  },
  env: {
     
    browser: true,
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential', 
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
  ],
  // required to lint *.vue files
  plugins: [
    'vue','js'
  ],
  // add your custom rules here
  rules: {
     
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

.eslintignore

/build/
/config/
/dist/
/*.js
/test/unit/coverage/

4:配置settinng.json

打开file->preferences->setting

然后将以下内容贴进去，注意，配置格式的代码一定要在第一个大括号对里面！！！！

{
     
    "eslint.codeAction.showDocumentation": {
     
        "enable": true
    },
    "emmet.excludeLanguages": [
        "markdown"
    ],
    //保存的时候自动格式化
    "editor.formatOnType": true,
    "editor.formatOnSave": true,
    //  #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true
}

5：其他常见的配置选项

eslint官方中文文档：里面有一些常用的配置，需要可自取！

6：接下来你在保存代码的时候便会按照你的格式进行格式化！