vue-cli vscode 構成 eslint の詳細な例

Vue-cli は Vue のスキャフォールディング ツールです。この記事では主に vue-cli vscode 設定 eslint を共有し、皆様のお役に立てれば幸いです。

効果

• vscode に非準拠のプロンプト情報をリアルタイムで表示できます

• <code><span style="font-size: 14px;">npm run lint</span>格式化所有不符合规范的代码，并列出所有需手动修改的代码错误及定位

• 可以定制规范【默认用的是eslint推荐的规范JavaScript Standard Style】

可以通过 <span style="font-size: 14px;">/*eslint-disable */</span>让下面的代码不接受代码规范检查、通过<span style="font-size: 14px;">/*eslint-enable */</span>让下面的代码重新接受代码规范检查、通过<span style="font-size: 14px;">// eslint-disable-line no-undef</span>让某行代码不接受规范检查以及可以有未定义的变量

如何配置

主要包括vscode的插件安装及配置和命令行插件的安装及配置

step1 vscode的插件安装及配置

1. 在vscode中搜索ESlint并安装

2. 在vscode的用户设置中加入如下代码：

<span style="font-size: 14px;">// 自动识别文件类型<br>    "emmet.syntaxProfiles": {<br>        "vue-html": "html",<br>        "vue": "html"<br>    },<br>    "eslint.autoFixOnSave": false,<br>    // 要lint的语言<br>    "eslint.validate": [<br>        "javascript",<br>        "javascriptreact",<br>        "html",<br>        "vue",<br>        {<br>            "language": "vue",<br>            "autoFix": true<br>        }<br>    ],<br>    "eslint.options": {<br>        "plugins": [<br>            "html"<br>        ]<br>    }<br></span>

1. 在项目根目录下新建<span style="font-size: 14px;">eslintrc.json</span>文件并加入如下代码：

<span style="font-size: 14px;">{<br>    "root": true,<br>    "parserOptions": {<br>        "sourceType": "module"<br>    },<br>    "env": {<br>        "browser": true,<br>        "es6": true<br>    },<br>    "extends": "eslint:recommended",<br>    "plugins": [<br>        "html"<br>    ],<br>    "rules": {<br>        "accessor-pairs": 2,<br>        "arrow-spacing": [2, {<br>          "before": true,<br>          "after": true<br>        }],<br>        "block-spacing": [2, "always"],<br>        "brace-style": [2, "1tbs", {<br>          "allowSingleLine": true<br>        }],<br>        "camelcase": [0, {<br>          "properties": "always"<br>        }],<br>        "comma-dangle": [2, "never"],<br>        "comma-spacing": [2, {<br>          "before": false,<br>          "after": true<br>        }],<br>        "comma-style": [2, "last"],<br>        "constructor-super": 2,<br>        "curly": [2, "multi-line"],<br>        "dot-location": [2, "property"],<br>        "eol-last": 2,<br>        // "eqeqeq": [2, "allow-null"],<br>        "eqeqeq": 0,<br>        "generator-star-spacing": [2, {<br>          "before": true,<br>          "after": true<br>        }],<br>        "handle-callback-err": [2, "^(err|error)$"],<br>        "indent": [2, 2, {<br>          "SwitchCase": 1<br>        }],<br>        "jsx-quotes": [2, "prefer-single"],<br>        "key-spacing": [2, {<br>          "beforeColon": false,<br>          "afterColon": true<br>        }],<br>        "keyword-spacing": [2, {<br>          "before": true,<br>          "after": true<br>        }],<br>        "new-cap": [2, {<br>          "newIsCap": true,<br>          "capIsNew": false<br>        }],<br>        "new-parens": 2,<br>        "no-array-constructor": 2,<br>        "no-caller": 2,<br>        "no-console": "off",<br>        "no-class-assign": 2,<br>        "no-cond-assign": 2,<br>        "no-const-assign": 2,<br>        "no-control-regex": 0,<br>        "no-delete-var": 2,<br>        "no-dupe-args": 2,<br>        "no-dupe-class-members": 2,<br>        "no-dupe-keys": 2,<br>        "no-duplicate-case": 2,<br>        "no-empty-character-class": 2,<br>        "no-empty-pattern": 2,<br>        "no-eval": 2,<br>        "no-ex-assign": 2,<br>        "no-extend-native": 2,<br>        "no-extra-bind": 2,<br>        "no-extra-boolean-cast": 2,<br>        "no-extra-parens": [2, "functions"],<br>        "no-fallthrough": 2,<br>        "no-floating-decimal": 2,<br>        "no-func-assign": 2,<br>        "no-implied-eval": 2,<br>        "no-inner-declarations": [2, "functions"],<br>        "no-invalid-regexp": 2,<br>        "no-irregular-whitespace": 2,<br>        "no-iterator": 2,<br>        "no-label-var": 2,<br>        "no-labels": [2, {<br>          "allowLoop": false,<br>          "allowSwitch": false<br>        }],<br>        "no-lone-blocks": 2,<br>        "no-mixed-spaces-and-tabs": 2,<br>        "no-multi-spaces": 2,<br>        "no-multi-str": 2,<br>        "no-multiple-empty-lines": [2, {<br>          "max": 1<br>        }],<br>        "no-native-reassign": 2,<br>        "no-negated-in-lhs": 2,<br>        "no-new-object": 2,<br>        "no-new-require": 2,<br>        "no-new-symbol": 2,<br>        "no-new-wrappers": 2,<br>        "no-obj-calls": 2,<br>        "no-octal": 2,<br>        "no-octal-escape": 2,<br>        "no-path-concat": 2,<br>        "no-proto": 2,<br>        "no-redeclare": 2,<br>        "no-regex-spaces": 2,<br>        "no-return-assign": [2, "except-parens"],<br>        "no-self-assign": 2,<br>        "no-self-compare": 2,<br>        "no-sequences": 2,<br>        "no-shadow-restricted-names": 2,<br>        "no-spaced-func": 2,<br>        "no-sparse-arrays": 2,<br>        "no-this-before-super": 2,<br>        "no-throw-literal": 2,<br>        "no-trailing-spaces": 2,<br>        "no-undef": 2,<br>        "no-undef-init": 2,<br>        "no-unexpected-multiline": 2,<br>        "no-unmodified-loop-condition": 2,<br>        "no-unneeded-ternary": [2, {<br>          "defaultAssignment": false<br>        }],<br>        "no-unreachable": 2,<br>        "no-unsafe-finally": 2,<br>        "no-unused-vars": [2, {<br>          "vars": "all",<br>          "args": "none"<br>        }],<br>        "no-useless-call": 2,<br>        "no-useless-computed-key": 2,<br>        "no-useless-constructor": 2,<br>        "no-useless-escape": 0,<br>        "no-whitespace-before-property": 2,<br>        "no-with": 2,<br>        "one-var": [2, {<br>          "initialized": "never"<br>        }],<br>        "operator-linebreak": [2, "after", {<br>          "overrides": {<br>            "?": "before",<br>            ":": "before"<br>          }<br>        }],<br>        "padded-blocks": [2, "never"],<br>        "quotes": [2, "single", {<br>          "avoidEscape": true,<br>          "allowTemplateLiterals": true<br>        }],<br>        "semi": [2, "never"],<br>        "semi-spacing": [2, {<br>          "before": false,<br>          "after": true<br>        }],<br>        "space-before-blocks": [2, "always"],<br>        "space-before-function-paren": [2, "never"],<br>        "space-in-parens": [2, "never"],<br>        "space-infix-ops": 2,<br>        "space-unary-ops": [2, {<br>          "words": true,<br>          "nonwords": false<br>        }],<br>        "spaced-comment": [2, "always", {<br>          "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!", ","]<br>        }],<br>        "template-curly-spacing": [2, "never"],<br>        "use-isnan": 2,<br>        "valid-typeof": 2,<br>        "wrap-iife": [2, "any"],<br>        "yield-star-spacing": [2, "both"],<br>        "yoda": [2, "never"],<br>        "prefer-const": 2,<br>        "object-curly-spacing": [2, "always", {<br>          "objectsInObjects": false<br>        }],<br>        "array-bracket-spacing": [2, "never"]<br>      }<br>}<br></span>

step2 命令行插件的安装及配置

1 . 在项目根目录下的<span style="font-size: 14px;">package.json</span>文件中的加入如下代码：
<span style="font-size: 14px;">scripts</span>下：

<span style="font-size: 14px;">"lint": "eslint --fix --ext .js,.vue src"<br></span>

和
<span style="font-size: 14px;">devDependencies</span>下：

<span style="font-size: 14px;">"eslint": "^3.19.0",<br>"eslint-plugin-vue": "^2.1.0",<br></span>

1. 在项目根目录终端下运行<span style="font-size: 14px;">cnpm i</span>npm run lint

   を実行することで、非準拠のプロンプトをすべてフォーマットできますcode>
仕様に準拠し、すべてのコードエラーと手動で変更する必要がある箇所をリストしたコード
仕様をカスタマイズできます [デフォルトは、eslint が推奨する JavaScript 標準スタイルです]

<p>/*eslint-disable */<a href="http://www.php.cn/js-tutorial-382635.html" target="_self"></a></p> を渡すと、次のコードがコード仕様チェックを受け入れないようにして、<p>/*eslint- を渡すことができます。これを行うには */<a href="http://www.php.cn/html5-tutorial-369892.html" target="_self"></a></p> を有効にします。 次のコードはコード仕様のチェックを再度受け入れ、<p>// eslint-disable-line no-undef<a href="http://www.php.cn/js-tutorial-364405.html" target="_self"></a></p> を渡してコード行を作成します。仕様チェックの対象ではなく、未定義の変数を持つことができます🎜🎜設定方法🎜🎜

🎜主に vscode プラグインのインストールと設定、コマンドライン プラグインのインストールと設定が含まれます🎜

🎜ステップ 1 vscode プラグインのインストールと設定🎜

🎜🎜🎜 vscode で ESlint を検索し、インストールします🎜🎜🎜🎜🎜🎜 vscode のユーザー設定: 🎜🎜🎜🎜rrreee
🎜🎜🎜 プロジェクトのルート ディレクトリに新しい 🎜🎜eslintrc.json🎜🎜 ファイルを作成し、追加します次のコード: 🎜🎜🎜🎜rrreee

🎜step2 コマンドラインプラグインのインストールと設定🎜

🎜🎜1. 次のコードを 🎜🎜package.json🎜に追加します。 > プロジェクト ルート ディレクトリの🎜 ファイル:
🎜🎜scripts🎜 🎜Down: 🎜🎜rrreee🎜🎜 および
🎜🎜devDependency🎜🎜Down : プロジェクトのルート ディレクトリ ターミナル内の 🎜🎜rrreee
🎜🎜🎜 c 🎜cnpm i🎜 🎜🎜🎜🎜🎜Done.🎜🎜🎜🎜 🎜🎜 関連する推奨事項: 🎜🎜🎜🎜 Vue-CLI を使用してマルチページ アプリケーション メソッドを開発する方法 🎜🎜🎜🎜 vue-cli を使用して vue プロジェクトと Webpack を構築する方法🎜🎜🎜🎜Vue-cliに関する関連事例のまとめ🎜🎜

以上がvue-cli vscode 構成 eslint の詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。