zukucode
主にWEB関連の情報を技術メモとして発信しています。

vscodeでvueのeslint、prettier、stylelintの設定を行う

visual studio code.vue.jsで構文チェックやフォーマットを行うeslintprettierの設定を行います。

拡張機能の追加

以下の拡張機能をインストールします。

Vetur
.vueファイルを扱うために必要です。
ESLint
eslintvscodeに組み込みます。
Prettier
prettiervscodeに組み込みます。

vscodeの設定

vscodeで以下の設定を追加します。

(すでにデフォルトで設定されているものもあるかもしれません。)

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "eslint.autoFixOnSave": true,
  "prettier.eslintIntegration": true,
  "prettier.stylelintIntegration": true,
  "editor.formatOnSave": true,
  "javascript.format.enable": false,
}

npmパッケージのインストール

以下のパッケージをインストールします。

  • eslint
  • eslint-config-prettier
  • eslint-plugin-prettier
  • eslint-plugin-vue
  • prettier
  • prettier-eslint
  • prettier-stylelint
  • stylelint

また、必須ではありませんが、検証ルールのセットなどをお好みでインストールします。

  • eslint-config-airbnb-base
  • stylelint-config-standard

eslintの設定

eslintの設定ファイルを作成し、以下の設定をします。

ルールはそれぞれお好みで設定してください。

背景黄色部分はprettierの設定です。

eslintrc.js
module.exports = {
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module',
  },
  env: {
    browser: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'airbnb-base',
    'plugin:vue/recommended',
    'plugin:prettier/recommended',
  ],
  rules: {
    // prettierの設定↓
    'prettier/prettier': [
      'error',
      {
        printWidth: 100,
        singleQuote: true,
        trailingComma: 'es5'
      }
    ],
    // eslintの設定↓
    'global-require': 0,
    'import/no-unresolved': 0,
    'no-param-reassign': 0,
  }
};

stylelintの設定

stylelintの設定ファイルを作成し、以下の設定をします。

ルールはお好みで設定してください。

.stylelintrc.json
{
  "extends": "stylelint-config-standard",
  "rules": {
    "no-empty-source": null
  }
}

動作確認

以上で設定ができましたので、一応vscodeを再起動して動作確認を行います。

不要なカッコがある、セミコロンがない、インデントがおかしい、などのエラーに対してエラーが表示されることが確認できます。

vscodeでeslintとprettierの動作確認1

エラー箇所にマウスオーバーでエラー内容が確認できます。

vscodeでeslintとprettierの動作確認2

保存すると自動でフォーマットされることが確認できます。

(私の環境だけかもしれませんが、保存処理Ctrl+sを何回もしなければ正しくフォーマットされないことがありました。フォーマットされない場合は何回もCtrl+sで保存処理をしてみてください。)

vscodeでeslintとprettierの動作確認3

vueファイルのhtmlcss(scss)にもエラーチェックが動作し、保存時に自動フォーマットされることが確認できます。

vscodeでvueのeslintとprettierの動作確認

vscodeでvueのeslintとprettierの動作確認2


関連記事