1 概述
配置项目是一件非常痛苦的事情,本文主要分享 Prettier, ESLint等组件的配置过程,避免后学者踩坑。
2 创建一个项目
使用下面的命令创建一个 NextJS&TypeScript
项目。
npx create-next-app --typescript new-app --use-yarn
安装 Prettier
和 EsLint
。
yarn install prettier@2.5.1 eslint@8.9.0 -D
安装额外的配置和插件,以扩展功能。
- @typescript-eslint/eslint-plugin:提供 lint 规则的 ESLint 插件
- eslint-config-airbnb:
Airbnb
提供的.eslintrc
的共享配置 - eslint-config-prettier:关闭所有不必要或可能与
Prettier
冲突的规则。 - eslint-plugin-jsx-a11y:静态 AST 检查器
- eslint-plugin-prettier:将
Prettier
作为ESLint
规则运行 - eslint-plugin-react:
React
特定的linting
规则 - eslint-plugin-react-hooks:
ESLint
插件强制执行Hooks
规则 - eslint-plugin-security:
ESLint
节点安全规则 - eslint-plugin-simple-import-sort: 自动修复的导入排序
- eslint-plugin-sonarjs: 用于
ESLint
的SonarJS
规则,用于检测代码中的 bug
注意
这些依赖包安装完毕后,先不要配置 .eslintrc.js
和 .prettierrc.js
文件。把 .eslintrc.json
改为 .eslintrc.js
,输入如下内容:
module.exports = {
root: true,
parserOptions: {
ecmaVersion: 2020,
sourceType: "module",
ecmaFeatures: {
jsx: true,
},
},
env: {
browser: true,
node: true,
es6: true,
},
settings: {
react: {
version: "detect",
},
"import/resolver": {
node: {
extensions: [".ts", ".tsx"],
},
},
},
plugins: ["@typescript-eslint"],
extends: [
"next/core-web-vitals",
"plugin:@typescript-eslint/recommended",
"airbnb",
"prettier",
"plugin:jsx-a11y/recommended",
"plugin:prettier/recommended",
"plugin:sonarjs/recommended",
"plugin:security/recommended"
// "plugin:react-hooks/recommended",
],
rules: {
"@typescript-eslint/no-unused-vars": "error",
"@typescript-eslint/no-explicit-any": "error",
"react/react-in-jsx-scope": "off",
"react/jsx-filename-extension": [
1,
{
extensions: [".ts", ".tsx", ".js", ".jsx"],
},
],
"react/jsx-props-no-spreading": "off",
"import/extensions": [
"error",
"ignorePackages",
{
js: "never",
jsx: "never",
ts: "never",
tsx: "never",
},
],
"jsx-a11y/anchor-is-valid": [
"error",
{
components: ["Link"],
specialLink: ["hrefLeft", "hrefRight"],
aspects: ["invalidHref", "preferButton"],
},
],
"no-nested-ternary": "off",
"import/prefer-default-export": "off",
},
}
然后,配置.prettierrc.js
。脚手架不会默认创建这个文件,我们需要手动设置。
module.exports = {
tabWidth: 4,
printWidth: 80,
endOfLine: "auto",
arrowParens: "avoid",
trailingComma: "es5",
semi: true,
useTabs: false,
singleQuote: false,
bracketSpacing: true,
};
至此,环境配置完毕。