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

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

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

(2020年1月時点の情報です。)

拡張機能の追加

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

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

vscodeの設定

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

{
    "editor.codeActionsOnSaveTimeout": 2000,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "vetur.format.defaultFormatter.html": "prettier",
    "css.validate": false,
    "less.validate": false,
    "scss.validate": false,
    "javascript.format.enable": false,
}

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

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

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

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

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

eslintの設定

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

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

.eslintrc.js
module.exports = {
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module',
  },
  env: {
    browser: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'airbnb-base',
    'plugin:prettier/recommended',
    'plugin:vue/recommended',
    'prettier/vue',
  ],
  plugins: ['vue', 'prettier'],
  rules: {
    'global-require': 0,
    'import/no-unresolved': 0,
    'no-param-reassign': 0,
  }
};

prettierの設定

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

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

.prettierrc.js
module.exports = {
  printWidth: 100,
  singleQuote: true,
  trailingComma: 'es5',
};

stylelintの設定

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

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

.stylelintrc.js
module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-prettier/recommended',
  ],
  rules: {
    'no-empty-source': null,
    'declaration-colon-newline-after': null,
    'value-list-comma-newline-after': 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


関連記事