当项目中使用了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相关的插件未能安装,根据错误提示安装即可。

补充:

问题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似乎已经是最新的了。
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐