vscode使用Eslint+Prettier格式化代码的详细操作

👉 step 1

1、安装Eslint插件和Prettier插件

2、 安装eslint

npm install eslint -g

👉 step 2

1、初始化项目

npm init -y

2、生成eslint配置文件

npx eslint --init

以下是我的配置

完了之后生成一个.eslintrc.json的文件

👉 step 3

1、vscode需要配置保存自动化格式

⚙ -> 设置 -> Format On Save =》 ✔ （保存时格式化文件）

2、以什么风格格式化代码。

⚙ -> 设置 -> Default Formatter -> 选择Prettier项

3、保存时总是执行fixAll

fixAll那选择true

4、总体配置：setting.json

{
  "workbench.colorTheme": "Default Dark+",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

到这一步基本的保存后都可以有eslint基础的格式化了

👉 step 4

1、配置Prettier，创建一个 .prettierrc.json文件

npm install --save-dev --save-exact prettier
echo {}> .prettierrc.json

然后写入配置：（按自己）

{
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "jsxSingleQuote": true
}

然后检测vscode设置的Prettier: Enable勾选状态

这时候可以保存后可以prettier格式化了，但是不会eslint不会显示红色

👉 step 5

关闭所有不必要或可能与Prettier冲突的规则。

1、安装eslint-config-prettier和eslint-plugin-prettier

npm install --save-dev eslint-config-prettier
npm install --save-dev eslint-plugin-prettier

2、然后在.eslintrc.json的 extends 最后加入plugin:prettier/recommended

确保下面格式是prettier

3、保存，重启vscode，爆红也生效了。

到这里就eslint和prettier就配完了

🔚 最后

一般情况下直接在.prettierrc.json配置即可，如果prettier没有这个配置的，就可以在.eslintrc.json中的“rules”中配置，举个例子：（配置全等）

效果👇

到此这篇关于vscode使用Eslint+Prettier格式化代码的文章就介绍到这了,更多相关vscode格式化代码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！