在 VSCode 中整合 Prettier、ESLint、Airbnb
本文最后更新于:2022年7月6日 上午
谁不想愉快的编码呢???
格式化代码和坚持风格指南是一项细致且耗时的任务。真的要纯靠人力去做的话,光是在检查分号和尾逗号这两建件工作就让人望而却步了。幸运的是,现在我们有很好的工具来帮助我们去实现,省时、省力、省心。
Update:说一下用了大概一周的感觉,如果是新项目的话确实很舒服。但如果是老项目,集成之后,哇,满屏的错误提示,各种提示格式不合法阿之类的。。。。。
所以在老项目里面,我暂时把
eslint-plugin-prettier
的配置注释掉了
// .eslintrc { "extends": ["airbnb", "prettier"], // "plugins": ["prettier"], "rules": { "prettier/prettier": ["error"] } }
Step 1
VSCode
中安装 ESLint
和 Prettier
两款插件
Step 2
项目中安装开发环境依赖:
npm install eslint prettier -D
Step 3
安装 Airbnb config,如果使用的是 npm 5+
的版本,运行如下命令安装 config 及其所有的依赖:
npx install-peerdeps --dev eslint-config-airbnb
Step 4
- 安装
eslint-config-prettier
,禁用ESLint
的格式化,避免和Prettier
冲突 - 安装
eslint-plugin-prettier
,当代码格式存在问题的时候,ESLint
会有相应的错误提示
npm install eslint-config-prettier eslint-plugin-prettier -D
Step 5
在项目根目录下,新建 .eslintrc
文件,文件内容如下:
{
"extends": ["airbnb", "prettier"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": ["error"]
}
}
Step 6
在项目根目录下,新建 .prettierrc
文件,输入一些控制代码格式化的相关设置,文件内容如下:
{
"printWidth": 100,
"singleQuote": true,
"tabWidth": 2
}
Step 7
设置 VSCode
在保存的时候进行格式化,在 VSCode
的配置文件中输入:
"editor.formatOnSave": true
参考链接
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!