VS Codeを利用してVue開発

投稿日 編集日 カテゴリ

1 ESlintの設定とそれのプラグイン

npm -g install eslint eslint-plugin-vue eslint-config-vue

注意：eslintがglobalとなる場合、プラグインのeslint-plugin-vueとeslint-config-vueもglobalにインストールしなければならない。

　続いて、プロジェクトのルートにeslint --initで、eslintの設定ファイルを作成する。作成された.eslintrc.jsを次のように編集する。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
module.exports = {
    "env": {
        "browser": true
    },
    "extends": ["vue","eslint:recommended"],
    "plugins": ["vue"],
    "rules": {
        "vue/jsx-uses-vars": 2,
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
};

これでeslintの基本設定が終了しました。

2 VS Codeのプラグイン

必要としてのプラグインは次のようにあります。

3 VS Codeの設定

[
1
2
3
4
5
6
7
8
9
10
11
"javascript",
"javascriptreact",
{
    "language": "vue",
    "autoFix": true
}
],
"emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html"
}