eslint、prettier和vscode的关系及实践

前言

最近在用vite创建新项目，新项目没有代码检查和代码格式化用着很不爽，上网查了关于eslint和prettier的博客，发现都不是很清晰（知识诅咒），所以自己记录一篇自己作为新手可以看的懂的文章。

第一步：创建一个新项目

使用npm init -y创建一个package.json文件，记录项目的信息。 在创建过程中会有一系列的选项，-y意味着所有选项均采用默认规则。

看到这个图片证明项目成功初始化了。

在项目里创建一个index.js文件，随便写几行不符合规则的代码。

文件夹

index.js代码

第二步 安装eslint

1. 使用npm i eslint -D安装eslint。
2. 在项目中初始化eslint配置。如果是在项目中局部安装eslint需要使用npx eslint --init,如果是全局安装可以使用eslint --init。在现在也就是2024年3月10日，使用上述命令控制台会提示，也可以使用npm init @eslint/config命令进行初始化配置。

我的eslint初始化配置如上，这个就根据实际情况进行选择。然后会产生一个.eslintrc.js文件。这个就是eslint配置文件。

文件夹情况

生成的.eslintrc.js情况
文件里的rules字段的就是eslint配置的规则。我们通过在文件里配置rules，就可以让eslint按照我们设置的规则进行检测。
在规则配置的时候 0 代表off关闭，1代表warn，2代表error。

"semi": 2,      // 不使用分号就报error错误          
"no-debugger": 1 //有debugger的时候就会报warn警告   

使用npx eslint index.js运行eslint检测我们的代码

我们可以看到

我们可以看到已经报错了和报警告了，因为咱们缺少分号和出现了debugger。

现在我们是在控制台里边，使用命令进行检测代码。我们同样可以使用eslint在命令行里修复我们的代码：npx eslint index.js --fix ，--fix参数就是修复代码。

修复后的代码
可以看到缺少的分号已经加上了。

第三步 vscode中eslint扩展插件

上述的操作都是在命令行里的操作，在编辑器里边没有任何的提示，所以需要vscode层面的支持，就要下载vscode扩展里的eslint插件

接下来打开vscode的设置文件：

然后再JSON文件里加入这段代码：

接下来返回文件中当我们保存文件的时候，就会发现eslint就会按照我们的规则修复代码。 注：能修复的就会修复，如缺少分号，单双引号等等，如果是涉及到一些逻辑的代码不会修复，会按照我们在.eslintrc中设置好的规则在我们代码编辑区，报错或者发出警告。如果我们在.eslintrc中设置"no-debugger":2 规则，eslint不会帮我们去掉debugger，而是会在代码上报错：

我们也可以使用eslint规范代码风格，如缩进，每行最大字符数等，但是eslint官网决定从v8.53.0起，Eslint中「代码风格相关规则」将被弃用。这就不用纠结到底是使用eslint规范代码风格还是prettier来规范代码格式了。以后就无脑prettier。

第四步 安装prettier

eslint用来规范代码错误和代码质量，prettier用来规范代码风格，当多人一起开发项目的时候，规范一定的风格是有利于维护的。同时避免了多种风格破坏git diff的信息可读性 我们使用npm i prettier -D来安装，因为我们都是在编码阶段需要格式化和代码检查，安装开发依赖就足够了。

安装完成之后，我们可以使用`npx prettier --write index.js`来格式化我们的代码。

第五步 vscode中prettier扩展插件

安装这个插件并且在setting.json里边配置如下代码

  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true

我们保存文件的时候，就会调用prettier进行格式化代码。 但是在实践过程中eslint和prettier的规则很有可能冲突。

冲突问题

下边是一个例子，只需要关注两个配置文件的冲突点和setting.json文件。冲突点已经在文件的注释中表出来了。

module.exports = {
  printWidth: 80, //单行长度
  tabWidth: 10, //使用tab缩进 ，tab的宽度--------------------------------------------冲突点
  useTabs: false, //使用空格代替tab缩进
  //   semi: true, //句末使用分号
  singleQuote: true, //使用单引号
  quoteProps: 'as-needed', //仅在必需时为对象的key添加引号
  jsxSingleQuote: true, // jsx中使用单引号
  trailingComma: 'all', //多行时尽可能打印尾随逗号
  bracketSpacing: true, //在对象前后添加空格-eg: { foo: bar }
  jsxBracketSameLine: true, //多属性html标签的'>'折行放置
  arrowParens: 'always', //单参数箭头函数参数周围使用圆括号-eg: (x) => x
  requirePragma: false, //无需顶部注释即可格式化
  insertPragma: false, //在已被preitter格式化的文件顶部加上标注
  proseWrap: 'preserve', //不知道怎么翻译
  htmlWhitespaceSensitivity: 'ignore', //对HTML全局空白不敏感
  vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进
  endOfLine: 'lf', //结束行形式
  embeddedLanguageFormatting: 'auto', //对引用代码进行格式化
};

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  // extends: ['eslint:recommended', 'prettier'],
  extends: ['eslint:recommended'],
  overrides: [
    {
      env: {
        node: true,
      },
      files: ['.eslintrc.{js,cjs}'],
      parserOptions: {
        sourceType: 'script',
      },
    },
  ],
  // plugins: ['prettier'],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {
    semi: 2,
    'no-debugger': 2,
    indent: [2, 4], ----------=--------------------------------------------------冲突点
    // 'prettier/prettier': 'error',
  },
};

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "eslint.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true
}

我们可以看到：

• .prettierrc.js规范的是使用tab进行缩进，并且tab的宽度是十个空格。
• .eslintrc.js规范是缩进为四个空格。

//eslint保存进行规范代码
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
//prettier保存时规范代码
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true
}

同时可以注意到settings.json文件里 editor.codeActionsOnSave.source.fixAll.eslint和editor.formatOnSave保存的时候同时会同时出发eslint和prettier的格式化行为。

规则的冲突发生了，我们在保存代码的时候，就会发现代码会缩进闪烁，也就是会按照.prettierrc.js和.eslintrc.js分别进行规范代码。

解决方案

将prettier当做eslint的插件来使用，将prettier的规则插入到eslint规则中，禁用掉eslint里边与prettier冲突的规则，然后关闭prettier保存格式化的行为（settings.json），这样就相当于只有"包含prettier规则的eslint"进行格式化代码。
重点是：

1. 禁用掉eslint里冲突的规则
2. 将prettier的规则插入到eslint中

这样既可以解决冲突，还可以

也可以让prettier借助eslint的规则实现：不满足prettier的规则就会在代码工作区显示warn和error。

prettier官方提供了两个工具：

• eslint-config-prettier:一个规范，禁用eslint里冲突的规则
• eslint-plugin-prettier：一个插件，将prettier作为规则插入到eslint里。 将两个工具按照如下方式进行配置就可以使用：

module.exports = {
     ......
  extends: ["eslint:recommended", "prettier"],
  plugins: ["prettier"],
  rules: {
    ......
    "prettier/prettier": "error",
  },
  ........
};

• extends里边prettier相当于集成了我们上述提到的eslint-config-prettier的插件的规范。
• plugins: ["prettier"]则是将eslint-plugin-prettier插件插入到eslint的插件系统中，将prettier集成到eslint中
• "prettier/prettier": "error"意思是代码违反了prettier的规则，就会报error，也就是我们上述说的：

也可以让prettier借助eslint的规则实现：不满足prettier的规则就会在代码工作区显示warn和error。

这样一来就可以配置好eslint和prettier了。

文件配置

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ["eslint:recommended", "prettier"],
  overrides: [
    {
      env: {
        node: true,
      },
      files: [".eslintrc.{js,cjs}"],
      parserOptions: {
        sourceType: "script",
      },
    },
  ],
  plugins: ["prettier"],
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  rules: {
    "prettier/prettier": "error",
  },
};

module.exports = {
          printWidth: 80, //单行长度
          tabWidth: 2, //缩进长度
          useTabs: false, //使用空格代替tab缩进
          //   semi: true, //句末使用分号
          singleQuote: false, //使用单引号
          quoteProps: 'as-needed', //仅在必需时为对象的key添加引号
          jsxSingleQuote: true, // jsx中使用单引号
          trailingComma: 'all', //多行时尽可能打印尾随逗号
          bracketSpacing: true, //在对象前后添加空格-eg: { foo: bar }
          jsxBracketSameLine: true, //多属性html标签的'>'折行放置
          arrowParens: 'always', //单参数箭头函数参数周围使用圆括号-eg: (x) => x
          requirePragma: false, //无需顶部注释即可格式化
          insertPragma: false, //在已被preitter格式化的文件顶部加上标注
          proseWrap: 'preserve', //不知道怎么翻译
          htmlWhitespaceSensitivity: 'ignore', //对HTML全局空白不敏感
          vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进
          endOfLine: 'lf', //结束行形式
          embeddedLanguageFormatting: 'auto', //对引用代码进行格式化
};

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "eslint.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
}