项目中使用eslint+prettier格式化代码

今天给大家介绍如何使用eslint+prettier统一代码风格。

eslint大家应该很熟悉了，它是用来校验代码规范的，还有检查遍历声明了是否调用，是否有console.log语句等，但是它仅支持js的代码风格.

prettier是用来统一代码风格，格式化代码的，支持js，ts，css,less,scss,json,jsx,并且集成了vscode , vim ,webstorm,sublime text插件.

那我们下来呢，从一个简单的项目中来认识eslint+prettier

1.项目初始化时选择风格为

2.保存代码校验代码风格，代码提交时候校验代码风格

3.你的项目目录下就会出现.eslintrc.js文件或者.eslintrc，后者是json格式文件 4.然后我们去配置.eslintrc.js文件，这里我们只配置rules部分

• 0或’off’：关闭规则。
• 1或’warn’：打开规则，并且作为一个警告（并不会导致检查不通过）。
• 2或’error’：打开规则，并且作为一个错误 (退出码为1，检查不通过)。

"rules": { "quotes": 2, "semi": 1, "no-console": 1, "space-before-function-paren": 0 } 5.启动项目

已经开始校验你的代码了 6.我们想要在保存的时候修复我们的代码，我们安装eslint的vscode插件

安装完之后就可以看到波浪线的报错了

7.vscode的setting.json下添加下面的语句

"editor.formatOnType": true,
"editor.formatOnSave": true,
"eslint.codeAction.showDocumentation": {
    "enable": true 
  }, 
"editor.codeActionsOnSave": { 
    "source.fixAll.eslint": true, 
  },
 "eslint.validate": ["javascript", "javascriptreact", "html", "vue"]