在 VSCode 中整合 Prettier、ESLint、Airbnb

VSCode 中安装 ESLintPrettier 两款插件

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
我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章