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

小玲子小玲子

已于 2024-06-25 18:01:15 修改

阅读量2.2w

点赞数 23

文章标签： vscode 工具配置

于 2022-04-11 22:49:27 首次发布

本文链接：https://blog.csdn.net/lingliu0824/article/details/124110842

版权

当项目中使用了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'
  }
}

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相关的插件未能安装，根据错误提示安装即可。