vscodeと@/vue-cli_へ4.xプロジェクト初期化eslint

前言vscodeを使用し、@/vue-cliを使用してvueプロジェクトを初期化した後、vueプロジェクトはeslintを持参するが、package.jsonからeslint構成をカスタマイズまたは分離するには、次のようにすることができる.このアプローチは、webpackで初期化されたプロジェクト、eslintをカスタマイズするために適用されます.
ステップ
vscode
まずvscodeを配置して、vscodeが自分でeslint規範を検査することを支持するようにして、誤り警報あるいは自動訂正を行って、ここでは誤り警告と自動訂正を開くことを提案して、強制的にコードの風格が一致しやすい.
設定でsettings.jsonファイルを開き、次の構成を追加します.

{
	......
	 // eslint
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue"
        ]
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue-html",
        "vue",
        "html",
    ],
    "eslint.run": "onSave",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
}

eslint
プロジェクトに独自のeslintを配置

npm install -g eslint:グローバルインストールeslint(オプション)

プロジェクトルートディレクトリでeslint --initコマンドを使用し、.eslintrc.*ファイルを初期化します.ここでは初期化時にvueプロジェクトを選択し、.eslintrc.json

を使用します.

プロジェクトルートディレクトリ作成commlitlint.config.js:

module.exports = {extends: ['@commitlint/config-conventional']};

.eslintrc.jsonの内容を補足し、eslintの公式サイトに従ってカスタマイズすることができ、ここでは自分が使用している.eslintrc.json:

を提供する.

{
    // root     eslint，            
    "root": true,
    // env      eslint     
    "env": {
        "browser": true,
        "node": true,
        "es6": true
    },
    // extends       eslint
    "extends": [
        "plugin:vue/essential",
        "eslint:recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
        // warn: 1, error: 2
        // for    
        "for-direction": 1,
        //      
        "semi": [2, "always"],
        //               return   
        "array-callback-return": 2,
        //         this
        "class-methods-use-this": 2,
        //    Switch      Default   
        "default-case": 2,
        //    ，         
        "dot-location": [2, "object"],
        //       
        "eqeqeq": [2, "always"],
        //    for-in      
        "guard-for-in": 2,
        //       
        "no-multi-spaces": 2,
        //             
        "no-multi-str": 2,
        //   __proto__
        "no-proto": 2,
        //       
        "no-self-compare": 2,
        //          error
        "no-throw-literal": 2,
        //        catch
        "no-useless-catch": 2,
        //        await   async
        "require-await": 2,
        //      yoda
        "yoda": 2,
        //                 
        "no-shadow": [2, {
        	"builtinGlobals": true,
			"hoist": "all"
		}],
        //        
        //              
        "array-bracket-spacing": [2, "never"],
        //        
        "brace-style": [2, "1tbs"],
        //       
        "camelcase": [2, {
			"properties": "always"
		}],
        //            
        "comma-dangle": [
            2,
            "always-multiline"
        ],
        //            
        "comma-spacing": 2,
        //          
        "comma-style": 2,
        //                
        "computed-property-spacing": 2,
        //       this    that
        "consistent-this": 2,
        //          
        "eol-last": 2,
        //                     
        "func-call-spacing": 2,
        //        ，   4    
        "indent": [2, 2],
        //                      
        "key-spacing": 2,
        //              
        "keyword-spacing": [2, {
			"overrides": {
				"if": { "after": false },
				"for": { "after": false },
				"while": { "after": false }
			}
		}],
        //            
        "new-cap": 2,
        //        
        "no-multiple-empty-lines": 2,
        //           
        "no-nested-ternary": 2,
        //       
        "no-trailing-spaces": 2,
        //         
        "no-whitespace-before-property": 2,
        //           、       
        "quotes": [2, "single"],
        //          
        "semi-spacing": 2,
        //              
        "space-before-blocks": 2,
        //                  
        "space-before-function-paren": [2, "never"],
        //             
        "space-in-parens": 2,
        //         
        "space-infix-ops": [2, {
			"int32Hint": false
        }],
        //         
        "spaced-comment": 2,
        //     switch         
        "switch-colon-spacing": 2,
        //              
        "arrow-body-style": [2, "as-needed"],
        //               
        "arrow-parens": [2, "as-needed"],
        //                  
        "arrow-spacing": 2,
        //       
        "no-duplicate-imports": 2,
        //   var
        "no-var": 2,
        //       
        "prefer-destructuring": 2
    }
}