在 react 项目中加 eslint，stylelint

eslint

1. 需要安装的依赖

npm install -D eslint eslint-loader eslint-friendly-formatter  eslint-plugin-babel
npm install -D babel-eslint eslint-plugin-html eslint-plugin-import eslint-plugin-promise eslint-plugin-node eslint-config-standard eslint-plugin-standard

2. 新建 .eslintrc.js

在项目根目录新建 .eslintrc.js 文件，添加如下内容

 module.exports = {
     root: true, // 作用的目录是根目录
     parser: 'babel-eslint',
     parserOptions: {
         parser: 'babel-eslint',
         sourceType: 'module' // 按照模块的方式解析
     },
     env: {
       browser: true, // 开发环境配置表示可以使用浏览器的方法
       node: true
     },
     extends: [
       // https://github.com/standard/standard/blob/master/docs/RULES-en.md
       'standard'
     ],
     rules: {
       // 自定义的规则
       "linebreak-style": [0 ,"error", "windows"],
       "indent": ['error', 4],
       'semi': ['error', 'always'], // 语句后必须加分号
     }
 }

3. 修改webpack.dev.conf.js文件

添加如下rule

 {
      test: /\.jsx?$/, // 匹配js文件或者jsx文件
      use: [
         {
             loader:'eslint-loader',
             options: { // 这里的配置项参数将会被传递到 eslint 的 CLIEngine
                   formatter: require('eslint-friendly-formatter') // 指定错误报告的格式规范
             }
         }
       ],
       enforce: "pre", // 编译前检查
       exclude: /node_modules/, // 不检测的文件
       include: [path.resolve(__dirname, '../', 'src')], // 指定检查的目录
  },

4. 让错误直接标注在对应的文件中

• vscode 安装 eslint 扩展
• 在 配置中，也就是 settings.json 中添加 "eslint.validate": [ "javascript", "react" ] 的配置即可
• 保存时自动按照eslint 格式化当前文件，在 setting.json 中配置 "eslint.autoFixOnSave": true,

stylelint

1. 安装依赖

 npm install -D stylelint stylelint-config-standard stylelint-webpack-plugin

2. 新建 .stylelintrc.js

在项目根目录新建 .stylelintrc.js 文件，添加如下内容

module.exports = {
 processors: [],
 plugins: [],
 extends: "stylelint-config-standard", // 这是官方推荐的方式
 rules: { 
 // 这里自定义规则
 // 可参考官方：https://stylelint.docschina.org/user-guide/rules/

 }
};

3. 修改webpack.dev.conf.js文件

添加如下代码

const StyleLintPlugin = require('stylelint-webpack-plugin');

// 在  plugins 中添加如下配置
new StyleLintPlugin({
      context: "src",
      configFile: path.resolve(__dirname, '../.stylelintrc.js'), // 指定 stylelint 配置的文件 
      files: '**/*.less',
      failOnError: false,
      quiet: true,
      syntax: 'less'
}),

4. 让错误直接标注在对应的文件中

• vscode 安装 stylelint 扩展，请注意：安装完插件后一定要重新加载，不然不会在文件中标注出错误
• 在 配置中，也就是 settings.json 中添加如下配置

   "stylelint.enable": true,
   "css.validate": false,
   "less.validate": false,
   "scss.validate": false,