<p>eslint是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。</p>    <p>两种安装方式</p>    <ul>     <li>全局</li>    </ul>    <p>适用于所有项目文件</p>    <p>先全局安装ESLint插件</p>    <pre>  <code class="language-javascript">$ npm install -g eslint  </code></pre>    <p>初始化配置文件</p>    <pre>  <code class="language-javascript">eslint --init  </code></pre>    <p>使用</p>    <pre>  <code class="language-javascript">eslint file.js  </code></pre>    <ul>     <li> <p>本地</p> <p>项目里使用</p> <pre>  <code class="language-javascript">npm install eslint --save-dev  </code></pre> </li>    </ul>    <p>react plugins</p>    <pre>  <code class="language-javascript">npm install --save-dev eslint-plugin-react  </code></pre>    <p>目前项目中用的airbnb代码规范</p>    <pre>  <code class="language-javascript">npm install --save-dev eslint-config-airbnb  </code></pre>    <p>项目中初始化配置文件</p>    <pre>  <code class="language-javascript">./node_modules/.bin/eslint --init  </code></pre>    <p>然后选择使用airbnb的方式</p>    <pre>  <code class="language-javascript">? How would you like to configure ESLint? Use a popular style guide  ? Which style guide do you want to follow? AirBnB  ? What format do you want your config file to be in? JavaScript  </code></pre>    <p>运行</p>    <pre>  <code class="language-javascript">./node_modules/.bin/eslint file.js  </code></pre>    <p>autofix</p>    <p>只支持空格分号等</p>    <p><a href="/misc/goto?guid=4959737746358746474" rel="nofollow,noindex">链接</a></p>    <pre>  <code class="language-javascript">./node_modules/.bin/eslint file.js --fix  </code></pre>    <h3>配置文件</h3>    <ul>     <li> <p>init 初始化配置文件后，项目中会得到一个.eslintrc.js的文件。当然还会有.json YAML等格式的。</p> <pre>  <code class="language-javascript">module.exports = {      "extends": "airbnb",//拓展规则      "plugins": [//插件            "react",            "jsx-a11y",            "import"      ],      "env": {//指定环境        "browser": true,        "node": true      },       "rules": {//规则          "semi": "error"      }  }  </code></pre> </li>     <li> <p>package.json中使用</p> <pre>  <code class="language-javascript">"name": "mypackage",  "version": "0.0.1",  "eslintConfig": {      "plugins": ["react"],      "env": {          "browser": true      }  }  </code></pre> </li>    </ul>    <p>Rules</p>    <ul>     <li>“off” 或 0 - 关闭规则</li>     <li>“warn” 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)</li>     <li>“error” 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)</li>    </ul>    <p>如果采用了拓展规则，比如说airbnb，会有默认的，再node_module中都有rules，那配置文件就不用再多写了。但是我们可以写一些，覆盖拓展里的，以达到关闭某些规则的作用。</p>    <p>例如</p>    <p>这些规则都可以google一下</p>    <pre>  <code class="language-javascript">"rules": {    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],    "react/forbid-prop-types": 0,    "react/no-array-index-key": 0,    "react/jsx-wrap-multilines": 0,    "react/prop-types": 1,    "jsx-a11y/no-static-element-interactions": 0,    "no-underscore-dangle": 0,    "no-script-url": 0,    "class-methods-use-this": 0,    "no-constant-condition": 0,    "max-len": 0,    "no-nested-ternary": 0,    "semi": 1,    "space-before-function-paren": 1  }  </code></pre>    <h3>.eslintignore</h3>    <p>可以在项目根目录创建，告诉ESLint忽略某些文件或者目录。相当于.gitignore都是纯文本文件。</p>    <p>例如</p>    <pre>  <code class="language-javascript"># 注释，忽略文件  node_modules  **/.js  build  </code></pre>    <h3>配合webpack的使用</h3>    <p>安装一个eslint-loader 的loader</p>    <pre>  <code class="language-javascript">module:{   preLoaders: [        {test: /\.js$/, loader: "eslint-loader", exclude: /node_modules/}      ],   loaders:[   {    test:/\.jsx?$/,    exclude:/node_modules/,    loader:'babel'   },   {    test:/\.css$/,    loaders:['style','css'],    include:'/dist'   }]  }  </code></pre>    <h3>结合pre-commit使用</h3>    <p>有时候可能我们的项目后入eslint，之前的文件太多，改不过来，但是却要慢慢加入。可以加一个git的hooks。</p>    <ul>     <li> <p>项目本地安装</p> <pre>  <code class="language-javascript">npm install --save-dev pre-commit  </code></pre> </li>     <li> <p>package.json配置</p> </li>    </ul>    <p>例如</p>    <pre>  <code class="language-javascript">{      "script": {          "lint": "git diff-tree --no-commit-id --name-only -r $REVISION | xargs pre-commit run --files."        },      "pre-commit": [          "lint"      ],  }  </code></pre>    <p><a href="/misc/goto?guid=4958877970518509889" rel="nofollow,noindex">pre-commit</a></p>    <ul>     <li> <p>git钩子(可自定义)</p> <p>钩子都被存储在Git目录下的hooks目录中</p> <pre>  <code class="language-javascript">cd .git/hooks && ls  </code></pre> </li>    </ul>    <p>这些钩子的功能主要分为提交工作流钩子、电子邮件工作流钩子和其它钩子。比如提交代码之前检查，提交给同组开发人员发邮件等等。</p>    <p><a href="/misc/goto?guid=4959670312911586141" rel="nofollow,noindex">git hooks</a></p>    <p>当然eslint也可以结合gulp，以及在编译器中使用。这些从网上都可以查到。比如我现在atom用到的就直接下载bao包了</p>    <pre>  <code class="language-javascript">apm install linter-eslint  </code></pre>    <p> </p>    <p>来自：https://sunyongjian.github.io/2017/02/17/eslint简单使用/</p>    <p> </p>