[开发工具]vscode使用eslint和prettier

使用eslint校验代码

每个程序员都有自己的编码习惯，最常见的莫过于：
有的人写代码一行代码结尾必须加分号 ;，有的人觉得不加分号 ; 更好看；
有的人写代码一行代码不会超过 80 个字符，认为这样看起来简洁明了，有的人喜欢把所有逻辑都写在一行代码上，觉得别人看不懂的代码很牛逼；

所以使用使用统一的规则来约束代码风格非常重要。

$ npm install eslint --save-dev
eslint --init

$ npm run lint:create

> 20170811@0.1.0 lint:create D:\code\test\20170811
> eslint --init

? How would you like to configure ESLint? Answer questions about your style // 以问答的形式创建配置文件
? Are you using ECMAScript 6 features? Yes      // 是否校验 Es6 语法
? Are you using ES6 modules? Yes                // 是否校验 Es6 模块语法
? Where will your code run? Browser             // 代码运行环境，Browser 指浏览器
? Do you use CommonJS? Yes                      // 是否校验 CommonJs 语法
? Do you use JSX? Yes                           // 是否校验 JSX 语法
? Do you use React? Yes                         // 是否校验 React 语法
? What style of indentation do you use? Tabs    // 首行空白选择 Tab 键还是 Space
? What quotes do you use for strings? Double    // 字符串使用单引号 'string' 还是双引号 "string"
? What line endings do you use? Windows         // 操作系统
? Do you require semicolons? Yes                // 每行代码结尾是否校验加分号 ;
? What format do you want your config file to be in? JavaScript     // 以 .js 格式生成配置文件
Installing eslint-plugin-react@latest   // 因为要校验 Reac 语法，所以这里需要下载一个 React 语法规则的包

package.json

"scripts": {
    "test": "react-scripts test --env=jsdom",
    "lint": "eslint src",
    "lint:create": "eslint --init"
}

setting.json中设置

"eslint.validate": [],
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "files.eol": "\n",
  "editor.tabSize": 2

.eslintrc文件

module.exports = {
  // 当前使用的环境，例如node、window
  env: {
    browser: true,
    es2021: true,
  },
  // 当前使用的规范为airbnb
  extends: ['airbnb-base'],
  // 
  parserOptions: {
    // emcaVersion用来指定你想要使用的 ECMAScript 版本，当前为最新es12
    ecmaVersion: 12,
    // 设置为 “script” (默认)或"module"（如果代码是 ECMAScript 模块)
    sourceType: 'module',
  },
  rules: {
    quotes: [1, 'single'],
    'quote-props': [2, 'as-needed'],
    'comma-dangle': [1, 'always-multiline'],
    'eol-last': [0, 'always'],
  },
};

使用prettier自动修复

vscode安装第一个

setting.json中设置

 "prettier.trailingComma": "all",
  "prettier.vueIndentScriptAndStyle": true,
  "git.ignoreMissingGitWarning": true,
  "prettier.requireConfig": false,
  "prettier.singleQuote": true,
  "prettier.useTabs": false,
  // tab的宽度
  "prettier.tabWidth": 2,