ESLint + Prettier
ESLint
运行初始化
eslint --init
JavaScript 代码规范
根据选择的 JavaScript 代码规范,进行安装,这边选择 google。
Prettier
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier
simple-import-sort/sort
排序 import
yarn add -D eslint-plugin-simple-import-sort
最后在 IDE 里启动自动修改
范例
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
"next/core-web-vitals",
"plugin:react/recommended",
"google",
"prettier",
"plugin:prettier/recommended",
],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: "module",
},
plugins: ["react", "prettier", "simple-import-sort", "react-hooks"],
rules: {
"prettier/prettier": "error",
"require-jsdoc": 0,
"no-unused-vars": 0,
"no-invalid-this": 0,
"react/prop-types": 0,
"react/display-name": 0,
"simple-import-sort/imports": "error",
"react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
"react-hooks/exhaustive-deps": [
"warn",
{
additionalHooks: "useRecoilCallback",
},
],
},
};
.prettierrc 范例
{
"trailingComma": "none", // 尾随逗号
"tabWidth": 2,
"printWidth": 120,
"singleQuote": true,
"semi": false,
"arrowParens": "avoid", // 尽可能省略括号。示例:x => x
"bracketSpacing": true,
"jsxSingleQuote": true
}