Nextjs+Eslint+Prettier+VSCode代码的校验与格式化Prettier不生效问题

这个问题是我实际生产过程中碰到的，特此记录一下。

NextJS的Eslint配置

按照官网来一遍就可以了，大家可以移步官网，不多赘述了。

• 创建选Eslint（官网）
• 加入各种插件，如react、Prettier等（官网）

问题的发现

到目前这一套如果用 Webstorm 开发的话那是一点问题也没有，配置好Eslint，然后装一个Prettier就万事大吉了。

但是，最近我想研究一下搭建一个开发服务器，使用SSH连接Docker进行开发。

当然，Webstorm也是支持SSH远程开发的。唯一的遗憾是Webstorm无法调起本地的debug浏览器，网上的所有方法都试过了，全部失败。如果有知道怎么搞的，欢迎留言分享哈。

最后，我决定改用 VSCode。经过尝试，VSCode天然可直接调用本地debug浏览器，我太感动了。但是，问题也就来了。Eslint突然没有效果了，准确来说是Eslint的Prettier插件没有效果了。

解决问题

网上有一堆VSCode如何配置Eslint的方法，还说需要装VSCode的Prettier插件。

首先，Eslint和Prettier插件都是用来格式化的，装一个就够了，尤其是你本来就已经在Eslint配置里配置过Prettier了的情况下。

所以，我的VSCode的settings.json这么配置：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "always"
  },
  "editor.defaultFormatter": "dbaeumer.vscode-eslint", // 不需要配置Prettier
  "eslint.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    "vue-html",
    "typescript",
    "typescriptreact"
  ],
  "eslint.options": {
    "extensions": [".js", ".vue", ".ts", ".tsx", ".jsx"]
  },
}

我的VSCode没有装Prettier插件，所以配置里不需要做相关配置。

官方的配置都搞完应该是下面这样的：

.eslintrc.json

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "next",
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "plugins": ["react", "@typescript-eslint"],
  "globals": {
    "React": true
  },
  "rules": {
    "react-hooks/exhaustive-deps": "off"
  }
}

.prettierrc.js

module.exports = {
  endOfLine: "auto",
  plugins: ["prettier-plugin-tailwindcss", "prettier-plugin-organize-imports"],
  tailingComma: "es5",
};

按照这个配置，Eslint改rules的配置的话是生效的，但是Prettier配置不生效。

.eslintrc.json的extends配置中的prettier改成plugin:prettier/recommended就可以了。

最后.eslintrc.json的配置应该是这样的：

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "next",
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": ["react", "@typescript-eslint"],
  "globals": {
    "React": true
  },
  "rules": {
    "react-hooks/exhaustive-deps": "off"
  }
}