JavaScript代码风格

男娘i 2022-02-16 09:21 468阅读 0赞

## 基于[eslint][]的代码规则，具体规则详见[eslint-config-airbnb][]源码 ##

配置方法：

*   *  安装eslint-loader
        
        <table> 
         <tbody> 
          <tr> 
           <td> <p><code>npm install --save-dev eslint-loader</code></p> </td> 
          </tr> 
         </tbody> 
        </table>
     *  安装eslint
        
        <table> 
         <tbody> 
          <tr> 
           <td> <p><code>npm install --save-dev eslint</code></p> </td> 
          </tr> 
         </tbody> 
        </table>
     *  webpack.config.js下添加代码
        
        <table> 
         <tbody> 
          <tr> 
           <td> <p><code>{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>test: /\.jsx?$/,</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>loader:&nbsp;</code><code>'eslint-loader'</code><code>,</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>enforce:&nbsp;</code><code>"pre"</code><code>,</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>include: [path.resolve(__dirname,&nbsp;</code><code>'src'</code><code>)],&nbsp;</code><code>// 指定检查的目录</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>options: {&nbsp;</code><code>// 这里的配置项参数将会被传递到 eslint 的 CLIEngine</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>formatter: require(</code><code>'eslint-friendly-formatter'</code><code>)&nbsp;</code><code>// 指定错误报告的格式规范</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>}</code></p> </td> 
          </tr> 
         </tbody> 
        </table>
     *  第四步：新建配置文件.eslintrc.js
        
        <table> 
         <tbody> 
          <tr> 
           <td> <p><code>module.exports = { </code></p> <p><code>&nbsp;&nbsp;</code><code>"parser"</code><code>:&nbsp;</code><code>"babel-eslint"</code><code>,</code></p> <p><code>&nbsp;&nbsp;</code><code>"extends"</code><code>:&nbsp;</code><code>"airbnb"</code><code>,</code></p> <p><code>&nbsp;&nbsp;</code><code>"rules"</code><code>: { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"import/no-extraneous-dependencies"</code><code>:&nbsp;</code><code>"off"</code><code>,</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"import/no-unresolved"</code><code>:&nbsp;</code><code>"off"</code><code>,</code></p> <p><code>&nbsp;&nbsp;</code><code>},</code></p> <p><code>&nbsp;&nbsp;</code><code>globals: { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>APP_TYPE:&nbsp;</code><code>true</code><code>,</code></p> <p><code>&nbsp;&nbsp;</code><code>},</code></p> <p><code>&nbsp;&nbsp;</code><code>"env"</code><code>: { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"browser"</code><code>:&nbsp;</code><code>true</code><code>,</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"node"</code><code>:&nbsp;</code><code>true</code><code>,</code></p> <p><code>&nbsp;&nbsp;</code><code>},</code></p> <p><code>};</code></p> </td> 
          </tr> 
         </tbody> 
        </table>
     *  第五步：在package.json中添加
        
        <table> 
         <tbody> 
          <tr> 
           <td> <p><code>"scripts"</code><code>: { </code></p> <p><code>&nbsp;&nbsp;</code><code>"dev"</code><code>:&nbsp;</code><code>"webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"</code><code>,</code></p> <p><code>&nbsp;&nbsp;</code><code>"start"</code><code>:&nbsp;</code><code>"npm run dev"</code><code>,</code></p> <p><code>&nbsp;&nbsp;</code><code>"build"</code><code>:&nbsp;</code><code>"node build/build.js"</code><code>,</code></p> <p><code>&nbsp;&nbsp;</code><code>"lint"</code><code>:&nbsp;</code><code>"eslint --ext .js,.jsx src"</code><code>,</code><code>//添加此行</code></p> <p><code>&nbsp;&nbsp;</code><code>"precommit"</code><code>:&nbsp;</code><code>"lint-staged"</code></p> <p><code>},</code></p> </td> 
          </tr> 
         </tbody> 
        </table>
     *  第六步：配置Airbnb校验规则及其依赖
        
        <table> 
         <tbody> 
          <tr> 
           <td> <p><code>npm install eslint-plugin-jsx-a11y --save</code></p> <p><code>npm install eslint-plugin-react --save</code></p> <p><code>npm install eslint-plugin-import --save</code></p> <p><code>npm install --save-dev eslint-config-airbnb</code></p> </td> 
          </tr> 
         </tbody> 
        </table>
     *  第七步：在配置文件.eslintrc.js中添加
        
        <table> 
         <tbody> 
          <tr> 
           <td> <p><code>extends:&nbsp;</code><code>'airbnb'</code><code>,</code></p> </td> 
          </tr> 
         </tbody> 
        </table>

[eslint]: https://eslint.org/
[eslint-config-airbnb]: https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb