如何配合使用ESLINT 和 PRETTIER
各自的作用
eslint
:静态分析语法错误prettier
:代码格式化工具(需要在IDE
中安装prettier的插件)
使用方法:
-
安装
npm install eslint --save-dev // 创建 .eslintrc.json 文件 npx eslint --init npm install eslint-config-prettier eslint-plugin-prettier prettier --save-dev
作用
eslint-config-prettier
- 关闭eslint
和prettier
中冲突的规则.
eslint-plugin-prettier
- 用eslint
来检查prettier
的报出的问题 -
配置
- 在
.eslintrc
中添加"extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"]
- 在
.prettierrc
中添加自己的配置{"semi": true,"tabWidth": 2,"printWidth": 100,"singleQuote": true,"trailingComma": "none","jsxBracketSameLine": true }
- package.json中添加
"lint": "eslint .", "lint:fix": "eslint --fix",
- 在
附:
- 可参考这个项目中的配置:自建前端组件库项目
- VSCode中使用Prettier的教程可参考:VSCode 插件之 Prettier