ESLint
-
执行初始化命令：
npx eslint --init
-
ESLint React Hook
eslint-plugin-react-hooks链接：https://www.npmjs.com/package/eslint-plugin-react-hooks
yarn add eslint-plugin-react-hooks
-
eslint-plugin-import
eslint-plugin-import链接：https://www.npmjs.com/package/eslint-plugin-import eslint-import-resolver-typescript链接：https://www.npmjs.com/package/eslint-import-resolver-typescript（不要这个也可以）
yarn add eslint-plugin-import eslint-import-resolver-typescript
prettier
-
安装
eslint-config-prettier链接：https://github.com/prettier/eslint-config-prettier
eslint-plugin-prettier链接：https://github.com/prettier/eslint-plugin-prettier
可以在插件的官网中，找到一些配置
yarn add prettier eslint-config-prettier eslint-plugin-prettier
-
创建 .prettierrc.cjs文件
echo {}> .prettierrc.cjs
-
添加配置
根据你项目的要求进行配置
//.prettierrc.cjs
module.exports = {
"singleQuote": true,
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"trailingComma": "none"
}
配置.eslintrc.cjs文件
module.exports = {
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",//以下是配置我们安装的eslint的一些依赖插件
"plugin:import/typescript",
"plugin:react-hooks/recommended",
"plugin:prettier/recommended"
],
"overrides": [
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module",
"project":"./tsconfig.json" //指定TypeScript配置文件的路径。这个配置项告诉ESLint去读取和使用指定路径下的tsconfig.json文件，
},
"plugins": [
"react",
"react-hooks",
"@typescript-eslint",
"prettier" //添加prettier
],
"rules": {
//配置项目的一些规则，如下
//React17后无需导入React
"react/react-in-jsx-scope": "off",
// 不检验类型
"react/prop-types": "off",
// react-hooks
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"linebreak-style": ["error", "unix"],
// "import/order": [
// "error",
// {
// "groups": [
// "builtin",
// "external",
// "internal",
// "parent",
// "sibling",
// "index",
// "object"
// ],
// "newlines-between": "always",
// "alphabetize": { "order": "asc", "caseInsensitive": true }
// }
// ]
}
}
修改tsconfig.json文件
指定了TypeScript编译器需要包含的文件和文件夹。
//省略...
"include": ["vite.config.ts",".eslintrc.cjs","src"],
//省略···
WebStorm中的配置
打开setting配置，如下：
-
勾选自动运行eslint
-
勾选保存时运行Prettier
当我们保存代码时，就会自动格式化代码。
以上就是今日分享的文章，晚安啦！！
原文始发于微信公众号（大前端编程教学）：React18+vite项目配置ESLint+prettier
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/223996.html
