vscode+eslint+prettier 对代码进行检错及格式化

• 在项目下安装必要插件

//无论使用yarn还是npm，需要全局安装eslint
npm install eslint -g 全局安装
//如果你使用Npm
npm install  eslint babel-eslint eslint-plugin-react eslint-config-alloy -D
//如果你使用yarn
yarn add     eslint babel-eslint eslint-plugin-react eslint-config-alloy -D

• 在项目目录下创建配置文件 - .eslintrc.js

//.eslintrc.js
module.exports = {
    extends: [//使用哪些默认规则来检查,由于我们安装了 eslint-config-alloy 所以直接使用它的规则
        'alloy',
        'alloy/react',
    ],
    env: {
      browser: true,
      commonjs: true,
      es6: true
    },
    globals: {
      '$':true,//这里可以将一些全局变量忽略检查,如果你没有则可以不用配置
    },
    rules: {
      // 自定义你的规则,https://eslint.bootcss.com/docs/rules/ 可以查找规则
     'no-debugger':1,//比如发现debugger时只是警告，不要报错
     'indent': [1, 2], // 控制一个tab缩进为2个空格
     'quotes': [1, 'single'], // 要求字符串使用单引号包裹
      
    }
};

• 配置vscode
  1、首先需要在vscode内自己把eslint的插件安装好
  2、在vscode的setting.json中增加配置

{
    "eslint.validate": [
        "javascript",
        "javascriptreact",//增加了对react的支持
    ],
    // 开启保存时自动根据规则会修复一些问题，比如刚才我们配置了缩进和单引号包裹字符串，那么这个时候会自动格式化这些问题
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

• 排除某些文件夹或者文件不实用eslint检测
  1、在需要不检测的文件头部增加 /* eslint-disable */ 注释
  2、创建.eslintignore 文件，配置需要忽略的文件

  //.eslintignore 加入要过滤的文件夹和文件
  node_modules
  webpack.config.js
  

加入prettier来帮我们格式化代码

1、首先vscode内安装好prettier插件
2、在项目根目录下增加配置文件 prettier.config.js

module.exports={
  //简单配置几个常用的格式化方案
  tabWidth: 2,//1个tab用2个空格代替
  useTabs: false,
  printWidth: 120,
  semi:true,//末尾必须有分号
  singleQuote:true,//使用单引号包裹字符串
  jsxSingleQuote:true //jsx内也使用单引号包裹字符串
  //其他规则可以在https://prettier.io/docs/en/options.html查询
};

• 然后在vscode的setting.json内增加配置

{
    "editor.formatOnSave": true,//当保存的时候，自动格式化
    //指定react和js都使用prettier来作为格式化工具
     "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
     "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
}

好了接下来试试在编辑代码后按保存看看
如果不想自动格式化代码，可以将 "editor.formatOnSave": false 然后通过鼠标右键点击格式化命令来随时格式化

相关文件引用及推荐

• 从零构建前端 ESLint 工作流（2020手把手版）
  https://mp.weixin.qq.com/s/fR5TD-ibsOffS9bo0l9iWA

• vscode ESLint 校验React
  https://www.jianshu.com/p/f2fb689c6837

• eslint-config-alloy项目
  https://github.com/AlloyTeam/eslint-config-alloy/blob/master/README.zh-CN.md