VsCode構成Eslintフォーマットコード(vue)および共通プラグイン

1697 ワード

eslintの構成

プラグイン拡張ストア検索eslintをクリックしてインストールし、再ロードする.

配置eslint、開く =>> =>>

ユーザ設定にコンフィギュレーションコードを挿入する(vue対応):

    "eslint.options": {
        "plugins": [
            "html"
        ]
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "eslint.autoFixOnSave": true,
     "editor.tabSize": 2,

このときeslintはプロジェクトでコードを検出できる

Eslint検出は比較的厳格で、vueをeslintフォーマットコードに従う場合は、以下の操作を行います.

プラグインをインストールVeturvscodeの前のvueである.jsコードのヒント、文法のハイライトなどの機能の流行のプラグイン;

インストール後のデフォルト構成がわかるveturデフォルトはprettierフォーマット;

プラグインのインストールprettierただし、彼のフォーマットはeslintと同じではないため、ユーザー構成に以下の構成を追加する.

//  
"prettier.semi": false,
//        
"prettier.singleQuote": true,
//html          none
"vetur.format.defaultFormatter.html": "js-beautify-html",
//      
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
//            
"vetur.format.defaultFormatter.js": "vscode-typescript",

vue拡張推奨

Vue VSCode Snippets

Vue 2 Snippets
上には2つの使いやすいvueコードクリップがあります

Better Commentsハイライトコメントの拡張例:

css peek css定義へ移行

file peek fileから定義へ

vueベースのリアルタイム検索で、結果にキーワードをハイライト表示

Laravelのイベントを使ってみた