webstorm配置ESLint并自动修复 autofix problems

1.在项目中安装eslint

1.npm install eslint --save-dev
2.npm install eslint-loader --save-dev
3.npm i -D babel-eslint standard

 

2.新建eslintc.js编辑lint规则，eslintignore忽略lint的文件

eslintc.js配置参考，或者也可以参考官网配置：

// .eslintrc.js
// https://eslint.org/docs/user-guide/configuring
module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true
  },
  extends: [
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
  ],
  globals: {
    NODE_ENV: false
  },
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // 添加，分号必须
    semi: ['error', 'always'],
    'no-unexpected-multiline': 'off',
    'space-before-function-paren': ['error', 'never'],
    // 'quotes': ["error", "double", { "avoidEscape": true }]
    quotes: [
      'error',
      'single',
      {
        avoidEscape: true
      }
    ]
  }
};

eslintignore.js:

/dist/
/node_modules/
/*.js

配置webpack rules:

设置webstorm,开启eslint，这样在编码的时候，如果代码不符合eslint规范，就会自动提示

不规范：

 

快速修复eslint代码问题：点击FIX ESlint 自动修改eslint问题，在开发过程中，保持代码规范