vscode配置eslint,实现文件保存使用eslint格式化，问题1.扩展名‘eslint‘被配置为格式化程序，但它无法格式化’JavaScript‘文件。2.eslint命令无法执行_vscode eslint

当项目中使用了eslint时，如果保存时不使用eslint格式化，运行时可能会由于个人编码习惯出现很多问题，所以期望在保存时能够自动根据eslint配置格式化文档。

vscode配置eslint

1.安装eslint插件

在vscode插件市场中安装eslint

2.设置

设置图标–>设置（或者文件–>首选项–>设置），勾选下面选项

3.在项目根目录中创建.eslintrc.js文件

当然想要使用eslint格式化，在项目根目录中需要有.eslintrc.js文件，下面是一个示例

module.exports = {
  root: true,
  env: {
    node: true,
    jquery: true
  },
  globals: { '_': true, 'dayjs': true, '$': true, 'jQuery': true, 'echarts': true, 'Echarts': true },
  extends: ['plugin:vue/strongly-recommended', 'standard'],
  rules: {
    'prefer-const': 2,
    'no-const-assign': 2,
    'no-var': 2,
    'no-console': 'warn',
    'no-tabs': 0,
    'no-unused-vars': 0,
    'no-return-assign': 0,
    'vue/html-self-closing': 'off',
    'vue/require-default-prop': 0,
    "sort-imports": ["error", {
      "ignoreCase": true,
      "ignoreMemberSort": true,
      "memberSyntaxSortOrder": ["none", "all", "multiple", "single"]
    }],
    'vue/max-attributes-per-line': [
      // 配置成可允许一行attribute跟着标签
      'error',
      {
        singleline: 1,
        multiline: {
          max: 1,
          allowFirstLine: false
        }
      }
    ],
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

4.检查配置是否生效

可以在等号两边多打几个空格看是否有红色波浪线提示

此时点击保存，会自动将多余空格删除。
同时也可以通过右键–>使用…格式化文档，查看可以选择的格式化程序

eslint 配置完成后始终不生效问题

首先说一下eslint配置完后，始终不生效的问题，我之前使用的多模块项目，每个模块独立，但是始终有一个模块的eslint不生效，且右键格式化文档时提示：扩展名’eslint‘被配置为格式化程序，但它无法格式化’**‘文件，把模块内容复制到其他模块或新建模块都ok。最终解决：重启eslint。具体操作如下：
1.在vscode中使用快捷键ctrl+shift+p打开命令输入框
2.输入eslint
3.点击ESLint:Restart ESLint Server。

如果重启后仍然不能解决问题:
重复执行上面的1、2步，然后在第三步点击ESLint:show output channel。将会在控制台打印报错，有可能是eslint相关的插件未能安装，根据错误提示安装即可。

补充：

问题1 . 在格式化命令中突然没有eslint选项了，vscode中执行eslint相关命令报错command ‘eslint.restart’ not found

最近升级了node，后面不知道为什么eslint突然不生效了，想执行eslint命令查看问题结果直接执行不了。如上图所示
解决：
在扩展中找到eslint，我发现我使用的是v3.0.8版本，时间是3天前，估计是版本自动更新了，但是这个版本有问题或者不兼容

1. 点击卸载右边的下拉箭头
   
2. 点击 “安装另一个版本”
3. 选择上一个版本
   
4. 点击重新加载
   
5. 这个时候格式化就有eslint选项了，eslint命令也正常了。
   
   还有一种方式可以解决：升级vscode，之前遇到同样的问题通过升级vscode也解决了。但是这次vscode似乎已经是最新的了。