WebStorm 如何配置eslint （node.js） win7

step1:安装eslint依赖

方法一：在package.json文件中新增eslint相关依赖，保存后，使用命令npm install

<pre name="code" class="javascript">"devDependencies": {
    "nodemon": "^1.9.2",
    "babel-eslint": "^6.1.2",
    "babel-root-import": "^4.1.3",
    "eslint": "^3.6.0",
    "eslint-config-airbnb": "^11.2.0",
    "eslint-plugin-babel": "^3.3.0",
    "eslint-plugin-import": "^1.16.0",
    "eslint-plugin-jsx-a11y": "^2.2.2",
    "eslint-plugin-react": "^6.3.0"
  },
  "pre-commit": [
    "lint"
  ]

安装命令

npm install 模块名 --save-dev -g

--save-dev 保存模块名到package.json

-g 代表安装全局

step2:新增eslintrc.js文件 ，存放路径与package.json同一目录，文件内容如下

'use strict';

const eslintrc = {
  extends: ['eslint-config-airbnb'],
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  parser: 'babel-eslint',
  parserOptions: {
    ecmaVersion: 6,
    ecmaFeatures: {
      jsx: true,
      experimentalObjectRestSpread: true,
    },
  },
  plugins: [
    'react',
    'babel',
  ],
  rules: {
    'new-cap': ["error", { "capIsNew": false }],
    'arrow-body-style': 0,
    'react/no-danger': 0,
    'react/prop-types': 0,
    'react/jsx-no-bind': 0,
    'react/no-multi-comp': 0,
    'react/jsx-first-prop-new-line': 0,
    "react/jsx-filename-extension": [1, { extensions: ['.js'] }],
    'import/prefer-default-export': 0,
    'import/no-unresolved': [2, { "ignore": ["^[~]"] }],
    'import/no-extraneous-dependencies': 0,
    'no-underscore-dangle': 0,
    'no-param-reassign': 0,
    'no-return-assign': 0,
    'max-len': 0,
    'consistent-return': 0,
    'no-redeclare': 0,
    'semi': [2, "never"],
  }
};

module.exports = eslintrc;

step3:WebStorm中引用eslint

file --> Settings( Default Settings) --> 搜索eslint --> 勾选Enable --> 指定文件ESlint package目录（示例：C:\Users\admin\node_modules\eslint）

假如全局安装（路径在appdata里面，可通过在开始菜单中%appdata%回车查看 路径：C:\Users\jaune\AppData\Roaming\npm\node_modules\eslint）

step4:运行程序 node server.js

step5:重启webstrom

异常信息1：

Cannot find module 'babel-eslint'

解决方案：重新安装所有依赖（npm install -g），并重复step4、step45

异常信息2：

ESLint: Expected linebreaks to be 'LF' but found 'CRLF'. (linebreak-style)

解决方案：选择System-Dependent（settings-Editor->Code-style），并重复step5