本文基于React 项目配置，可以使用 create-react-app 。

我们为什么需要eslint?

因为每个人的代码习惯不一样，每个开发人员都需要和他人协作或者项目需要交接给下一代开发者。保持统一的代码规范，可以极大地提高效率，降低沟通和理解代码的成本。

等等

一、Eslint

Eslint 它规范的是代码偏向语法层面上的风格，比如不能使用debugger、alert、。。。

1、安装Eslint

npm install eslint --save-dev

2、创建 .eslintrc.js文件，会有询问问题的过程。

npx eslint --init

3、.eslintrc.js 配置项

module.exports = {"root": true, // 标识当前配置文件为eslint的根配置文件，让其停止在父级目录中继续寻找。"env": { // 运行环境配置，预设browser、es6、node、mocha等变量。这些环境并不是互斥的，所以你可以同时定义多个。"browser": true,"es6": true,"node": true,},"extends": [ // 扩展第三方规则，可以被基础配置中的已启用的规则继承。"eslint:recommended", // 集成 Eslint 中推荐的（打勾的）规则项 https://eslint.bootcss.com/docs/rules/"plugin:react/recommended", // 用于React的ESLint规则"plugin:react/jsx-runtime", // React 17 版本之后需要引入，这个解决 https://github.com/jsx-eslint/eslint-plugin-react#configuration/*Eslint 的三大通用规则,1.Google标准: eslint-config-google 2.Airbnb标准: eslint-config-airbnb3.Standard标准 eslint-config-standard*/ "standard" ],"globals": { // 定义全局环境变量。"Atomics": "readonly","SharedArrayBuffer": "readonly"},"parserOptions": { // 解析器配置项, 配置 JavaScript 语言选项"ecmaFeatures": {"jsx": true // 启用 JSX},"ecmaVersion": 2018, // ECMAScript 版本"sourceType": "module"},"plugins": [ // 第三方插件。需要在 rules、extends 中定义后才会生效，如果没有则不生效。"react"],"rules": { /**修改覆盖已经使用的规则。https://eslint.bootcss.com/docs/rules/off | 0 :表示关闭规则warn | 1 :表示将该规则转换为警告error | 2 :表示将该规则转换为错误*/"semi":  ["error", "never"],"no-alert": 0, // 禁止使用alert"no-multi-spaces": 1, // 不能用多余的空格"no-console": 2, // 禁止使用console},"settings": { // 自定义信息，每个规则都可以访问到"react": {"version": "detect"}}
};

4、eslint命令

/**
* @name 检查命令
* @description  --ext：可以指定在指定目录/文件; .js .jsx： react文件; src/：检测范围在src目录下匹配
*/
npx eslint --ext .js --ext .jsx src/
/**
* @name 修复命令（官方规则集带(扳手)图标的可以自动修复）
* @description  --ext：可以指定在指定目录/文件; .js .jsx： react文件; src/：检测范围在src目录下匹配; --fix 检测完自动修复
*/
npx eslint --fix --ext .js --ext .jsx src/

5、package.json 中配置检查命令行

每次输入eslint命令比较繁琐，可以在package.json 中配置这个脚本：

// npm run lint 或 npm run lint-fix
"scripts": {"lint": "eslint --ext .js --ext .jsx src/","lint-fix": "eslint --fix --ext .js --ext .jsx src/",
}

6、配置 .eslintignore

根目录新建 .eslintignore 文件，把想要屏蔽的文件或目录名称添加上即可:

.eslintrc.js
.prettierrc.js
babel.config.js
vetur.config.js
/node_modules/

二、Prettier

Prettier规范的是代码偏向于排版层面上的风格，比如缩进、一行代码太长了换不换行之类的代码排版问题等

1、安装 Prettier

// --save-exact 锁死版本
npm install --save-dev --save-exact prettier

2、手动创建 .prttierrc.js文件

// 此处的规则供参考，其中多半其实都是默认值，可以根据个人习惯改写
module.exports = {printWidth: 80, //单行长度tabWidth: 2, //缩进长度useTabs: false, //使用空格代替tab缩进semi: false, //句末使用分号singleQuote: false, //使用单引号arrowParens: "avoid",//单参数箭头函数参数周围使用圆括号-eg: (x) => xavoid：省略括号bracketSpacing: true,//在对象前后添加空格-eg: { foo: bar }insertPragma: false,//在已被preitter格式化的文件顶部加上标注jsxBracketSameLine: false,//多属性html标签的‘>’折行放置rangeStart: 0,requirePragma: false,//无需顶部注释即可格式化trailingComma: "none",//多行时尽可能打印尾随逗号useTabs: false//使用空格代替tab缩进
};

3、prettier修复命令

npx prettier --write src/

4、package.json 中配置检查命令行

// npm run prettier
"scripts": {"lint": "eslint --ext .js --ext .jsx src/","lint-fix": "eslint --fix --ext .js --ext .jsx src/","prettier": "prettier --write src/"
}

5、配置 .prettierignore

根目录新建 .prettierignore 文件，把想要屏蔽的文件或目录名称添加上即可:

/.vscode
/dist
*.png
.gitignore
.prettierignore
LICENSE
.eslintcache
*.lock
yarn-error.log
.history
CNAME
/build
/public

比如说上文咱们写了好多这种bug，一个一个手动修复，太麻烦了。eslint提供了一个–fix的命令行，可以实现自动修复不符合规范的代码，但是这种修复不是万能的，官网中说，有这个（扳手）

eslint prettier husky代码规范配置相关推荐

【Vue3+Vite+TS项目集成ESlint +Prettier实现代码规范检查和代码格式化】
目录前言创建项目安装初始化ESlint 安装ESlint: 初始化ESlint: 安装配置Prettier 安装prettier: 配置prettier: 配置VScode保存时自动格式化代码 ...
前端通过eslint+prettier+husky统一代码风格
背景多人协作项目,会遇到每个人都有自己的代码风格.所以需要通过工具来统一代码风格. husky是什么? 当您提交或推送时,您可以使用 husky 来检查您的提交消息.运行测试.检查代码等Husky ...
vsCode配置Eslint+Prettier结合使用详细配置步骤，规范化开发
一.eslint eslint它规范的是代码偏向语法层面上的风格.本篇文章以一个基本的vue项目,来说明eslint+prettier+husky配置项目代码规范,为了更好的描述本文, ...
Vue3+Vite项目配置Eslint+Prettier+Husky+Lint-Staged+Commitlint
Eslint 配置 ESLint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具. ESLint 能够帮你轻松写出高质量的 JavaScript 代码. 1.建议 vsc ...
eslint 配置_前端代码规范配置（一）
ESLint ESLint 是一个开源的 Javascript 代码检测工具,通过将 js 代码解析成抽象语法树(AST),分析并给与代码质量(如一些方法的使用方式不对)和代码风格(缩进,引号等等)两 ...
Vue 3 + Vite + Eslint + prettier + husky + lint-staged 搭建基础项目
vue3-vite-vant-h5-template 最新版vue移动端开发模板开箱即用的 Vue3 + Vant4 移动端模板使用技术 Vue 3 + TypeScript + Vite + V ...
手把手教你使用 ESLint + Prettier 规范项目代码
相信小伙伴们在小学时都经历过小平头时代,那时的教务处主任天天学校门口巡视,同学们更是一个个心惊胆战.那时的我们就好比一行行代码,如果发型不一,上来就是两-55555 不说了- 所以说统一样式更有助于我 ...
EditorConfig + ESLint + Prettier 实现代码规范化
前言接上文,本文主要记录下如何实现代码规范化.上文详见:Vite 3.x + Vue 3.x + TypeScript 4.x + Element Plus + Pinia 搭建项目_倔强的小绵羊的 ...
flutter代码规范配置
背景学习新的语法时,经常会习惯性带上以前使用的语法风格,导致新的语法不规范,为了能够编写出更加健壮的flutter代码,谷歌在SDK2.3.0开始出了flutter代码规范检查,方便我们在开发时及时 ...

eslint prettier husky代码规范配置