在VSCode的next.js项目中更好的使用eslint/prettier工具

俗话说，工欲善其事必先利其器。在编程中也是一样的，在创建项目时常搭配其他工具，来方便或者提高我们的开发质量，这里就分享在VSCode中的next.js项目里怎么配合eslint/prettier来提高代码质量。

开始

首先，通过next.js的脚手架创建一个next.js项目，输入如下：

shell 复制代码

npx create-next-app demo

下图是我常用的选择：

完成之后，就可以通过VSCode打开项目进行配置了。

VSCode插件

因为使用了eslint/prettier这两个工具，所以需要对应的VSCode插件来支持：

ESlint插件

Prettier插件

注意：上图安装第一个，而不是第二个！

VSCode配置

完成插件安装后，就可以进行一些相关的配置了，打开"文件"找到"首选项"后，打开"设置"会弹出一个功能配置界面，这就是我们接下来需要修改的地方了。

文件 -> 首选项 -> 设置

Eslint > Format: Enable

首先，我们需要允许eslint对代码进行格式化，在搜索框中输入：Eslint > Format: Enable后，勾选下面的选择。

Editor: Default Formatter

第二个，我们需要配置格式化时用到的默认程序，在输入框中输入：Editor: Default Formatter后，选择下面这个格式化程序：

该程序就是上面通过安装prettier插件时提供的。

Editor: Format On Save

第三个，我们可以配置保存时自动格式化（喜欢自己格式化的可以不配置）。在输入框中搜索：Editor: Format On Save，勾选上即可：

.vscode/settings.json

此时可以发现项目根目录中多了.vscode/settings这样一个文件，这就是在工作区配置时会生成的文件，里面代码正是我们配置的几个功能，如下：

json 复制代码

{
  "eslint.format.enable": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

Prettier配置

此时，当我们在代码中进行修改保存时。可以发现已经有自动格式化的功能了，在终端中执行如下命令，但是格式化的代码风格是默认的，比如使用双引号代替单引号，分号结尾等...

所以，下面就开始我们自己的代码风格定义！

eslint-config-prettier/eslint-plugin-prettier

首先，我们需要安装两个库，在终端中输入以下命令：

shell 复制代码

npm i --save-dev eslint-config-prettier eslint-plugin-prettier

介绍一下两位朋友的身份：

eslint-config-prettier：这个库的功能是防止eslint和prettier的规则冲突；
eslint-plugin-prettier：这个库的功能是让eslint能检测prettier的格式问题。

.prettierrc/.prettierignore

如果按照以下配置没有生效且能保证自己操作没有问题时，尝试重启VSCode重新验证

完成npm库的安装后，在根目录中创建.prettierrc文件，进行规则配置，例如：

js 复制代码

{
  "semi": true, // 需要分号
  "singleQuote": true, // 单引号
  "printWidth": 80, // 超出80字符换行
  "trailingComma": "all", // 对象逗号结尾
  "endOfLine": "auto" // 不区分linux/windows的符号
}

此时prettier的配置还未生效，因为还需要在eslint.config.mjs中进行配置的修改，如下：

js 复制代码

...
const eslintConfig = [
  ...compat.config({
    extends: ["next/core-web-vitals", "next/typescript", "prettier"],
    ignorePatterns: [
      "node_modules/**",
      ".next/**",
      "out/**",
      "build/**",
      "next-env.d.ts",
    ],
  }),
];
...

此时再进行保存，格式化的风格就参考我们的.prettierrc文件来了。但是现在仍然没有提示，我们需要再修改一下配置：

js 复制代码

...
const eslintConfig = [
  ...compat.config({
    extends: [
      'next/core-web-vitals',
      'next/typescript',
      'prettier',
      'plugin:prettier/recommended', // 新加的，上面安装的npm库
    ],
    ignorePatterns: [
      'node_modules/**',
      '.next/**',
      'out/**',
      'build/**',
      'next-env.d.ts',
    ],
    rules: {
      'prettier/prettier': ['warn', {}, { usePrettierrc: true }], // 让eslint能提示出存在prettier风格问题的警告
    },
  }),
];
...

这个时候，我们的VSCode中的代码文件，存在风格问题的地方就会有黄线警告了，并且保存时会自动格式化代码。

如果不希望有文件不受prettier风格影响的话，我们可以创建.prettierignore文件进行忽略，例如：

vbnet 复制代码

node_modules/**
.next/**
out/**
build/**
next-env.d.ts'

其他配置

以上就已经成功在VSCode中的next.js项目里面配置好了eslint/prettier的功能，下面再分享一些个人觉得比较好用的配置。

Editor:Code Action On Save

在设置中搜索：Editor:Code Action On Save后（工作区），打开如下图红线的链接：

添加下面的配置：

json 复制代码

{
  "eslint.format.enable": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports": "explicit"
  }
}

此时当进行保存时，一些未被使用的import引入将被自动删除，如图：

@trivago/prettier-plugin-sort-imports

该插件是对import顺序进行格式化的插件，打开终端安装：

shell 复制代码

npm i --save-dev @trivago/prettier-plugin-sort-imports

并且对.prettier文件进行配置修改，如下所示：

json 复制代码

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 80,
  "trailingComma": "all",
  "endOfLine": "auto",
  "importOrder": ["<THIRD_PARTY_MODULES>", "^@/(.*)$", "^[../]", "^[./]"], // import排序
  "importOrderSeparation": true, // import添加空行
  "plugins": ["@trivago/prettier-plugin-sort-imports"] //插件
}

这样就更整齐的统一了我们的引入顺序。

prettier-plugin-tailwindcss

对于喜好使用tailwindcss的朋友们来说，我还是比较推荐prettier-plugin-tailwindcss这个插件的，可以比较整齐的统一className的风格，打开终端安装：

shell 复制代码

npm i --save-dev prettier-plugin-tailwindcss

并且在.prettierrc添加插件，如下：

json 复制代码

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 80,
  "trailingComma": "all",
  "endOfLine": "auto",
  "importOrder": ["<THIRD_PARTY_MODULES>", "^@/(.*)$", "^[../]", "^[./]"],
  "importOrderSeparation": true,
  "plugins": [
    "@trivago/prettier-plugin-sort-imports",
    "prettier-plugin-tailwindcss"
  ]
}

此时我们在代码中进行样式编写，再保存时就会统一风格了，如下图：

结束

对于工具和风格的配置，都是按照个人喜爱的方式来，也可以按照官方推荐的方式来。有些或许适合强迫症，有些或许让人觉得繁琐，所以最后还是根据个人的想法来最好！