jsコード仕様の---Eslentインストールと配置

11625 ワード

eslint javascript

一、Esleintインストール
1.グローバルインストール
あなたがESLINEをすべての項目に適用したいなら、グローバルにESLINEをインストールすることをお勧めします.

$ npm install -g eslint

初期化プロファイル

$ eslint --init

2.ローカルインストール

$ npm install eslint --save-dev

初期化プロファイル

$ ./node_modules/.bin/eslint --init

3.webpackにeslintを配置する
eslint-loader解析.eslintファイルをインストールする必要があります.

{
        test: /\.(js|jsx|mjs)$/,
        enforce: 'pre',
        use: [
          {
            options: {
              formatter: eslintFormatter,
              eslintPath: require.resolve('eslint'),
              
            },
            loader: require.resolve('eslint-loader'),
          },
        ],
        include: paths.appSrc, //    exclude             .eslintignore
},

二、ESlint配置
1.プロファイルタイプと優先順位

.eslintrc.js-を使用して.eslintrc.jsを出力し、設定オブジェクト

を出力する.

.eslintrc.yaml-を使用して構成の構造を定義します.

.eslintrc.yml

.eslintrc.json-使用.eslintrc.jsonは構成の構造を定義します.ESLintのJSONファイルはJavaScriptスタイルの注釈

を許可します.

.eslintrc(廃棄)

package.json-package.jsonの中で一つのeslintConfig属性を創建して、そこであなたの配置を定義します.
2.plugin属性
ESLintはサードパーティ・プラグイン(eslint-plugin-先頭のnpmパッケージ)を使用することができます.プラグインを使用する前にnpmを使用してインストールしなければなりません.eslint-plugin-react、eslint-plugin-vueなどのようです.

module.exports = {
    "plugins": [
        "react"
    ],
    "extends": [
        "eslint:recommended"
    ],
    "rules": {
       "no-set-state": "off"
    }
}

3.extens属性
一つのプロファイルは、基礎構成で有効にされたルールによって継承されます.以下のルールで継承できます.
(1)「eslint:recommended」
Eslentで推奨されているルール項目を継承します.

module.exports = {
    "extends": "eslint:recommended",
    "rules": {
        
    }
}

(2)他の人が書いた規則カバン(eslint-config-先頭のnpmで包む)を使って、eslint-config-standardのようです.

module.exports = {
    "extends": "standard",
    "rules": {
        
    }
}

(3)Esleintプラグインで命名された構成

module.exports = {
    "plugins": [
        "react"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "rules": {
       "no-set-state": "off"
    }
}

(4)「eslint:all」を使用して、Eslentのすべてのコアルール項目を継承する

module.exports = {
    "extends": "eslint:all",
    "rules": {
        // override default options
        "comma-dangle": ["error", "always"],
        "indent": ["error", 2],
        "no-cond-assign": ["error", "always"],

        // disable now, but enable in the future
        "one-var": "off", // ["error", "never"]

        // disable
        "init-declarations": "off",
        "no-console": "off",
        "no-inline-comments": "off",
    }
}

4.rules属性(自分の必要に応じて配置する)
(1)Esleint部分の核心ルール

"rules": {
        /**
        **      JavaScript                
        **/
        "for-direction":"error",//   “for”                     
        "getter-return":"error",//    getter         return   
        "no-await-in-loop":"error",//          await
        "no-compare-neg-zer":"error",//    -0     
        "no-cond-assign":[//               
            "error",
            "always"
        ],
        "no-console":[//   console
            "error"
//            { "allow": ["warn", "error"] }
        ],
        "no-constant-condition":"error",//             
        "no-control-regex":"error",//               
        "no-debugger":"error",//   debugger
        "no-dupe-args":"error",//    function           
        "no-dupe-keys":"error",//               
        "no-duplicate-case":"error",//     case   
        "no-empty":"error",//      
        "no-empty-character-class":"error",//               
        "no-ex-assign":"error",//    catch           
        "no-extra-boolean-cast":"error",//            
        "no-extra-parens":"error",//       
        "no-extra-semi":"error",//        
        "no-func-assign":"error",//    function       
        "no-inner-declarations":"error",//                function   
        "no-invalid-regexp":"error",//    RegExp                
        "no-irregular-whitespace":"error",//        
        "no-obj-calls":"error",//               
        "no-prototype-builtins":"error",//       Object.prototypes      
        "no-regex-spaces":"error",//                 
        "no-sparse-arrays": "error",//      
        "no-template-curly-in-string":"error",//                     
        "no-unexpected-multiline":"error",//              
        "no-unreachable":"error",//    return、throw、continue   break           
        "no-unsafe-finally":"error",//    finally            
        "no-unsafe-negation":"error",//                    
        "use-isnan":"error",//     isNaN()   NaN
        "valid-jsdoc":"error",//        JSDoc   
        "valid-typeof":"error",//   typeof               
        /**
        **    
        **/
        "accessor-pairs":"error",//  getter/setter        
        "array-callback-return":"error",//              return   
        "block-scoped-var":"error",//  var                
        "class-methods-use-this":"error",//        this
        "complexity":"error"//      
        .....
    }

(2)eslint-plugin-vueのルール

'rules': {

        /* for vue */

        //          

        // @off      

        'vue/no-dupe-keys': 'off',

        //         

        'vue/no-parsing-error': 'error',

        //        

        'vue/no-reservered-keys': 'error',

        //     data            

        'vue/no-shared-component-data': 'off',

        //

(3)eslint-plugin-reactのルール

/**
        **react  
        **/
        "react/boolean-prop-naming": ["error", { "rule": "^is[A-Z]([A-Za-z0-9]?)+" }],//bool   props      
        "react/button-has-type": ["error", {"reset": false}],//     type     "button","submit","reset"    
        "react/default-props-match-prop-types": [2, { "allowRequiredDefaults": false }],//    defaultProps    non-required PropType
        "react/destructuring-assignment": [1, "always"],//   props,state,context    
        "react/display-name": [1, { "ignoreTranspilerName": false }],//react       displayName
        "react/forbid-component-props": [1],//           (className, style)  
        "react/forbid-dom-props": [1, { "forbid": ["style"] }],//   dom          
        "react/forbid-elements": [1, { "forbid": ["button"] }],//            
        "react/forbid-prop-types": [1],//    propTypes    
        "react/no-access-state-in-setstate":"error",//   setState   this.state
        "react/no-children-prop":[1],//   Children    
        "react/no-string-refs":[1],//    string   ref
        "react/no-unused-state":[1],//   state         
        //.....
        "react/jsx-no-undef": [1, { "allowGlobals": false }],//           
        "react/jsx-key":[1]//    key

Javascriptにおける対象継承の実現例