Nuxt.jsでの開発におけるLinterとFormatter設定

はじめに

VS Code環境におけるNuxt.jsで簡単に構文チェック、フォーマットが行えるようにほかのサイトを参考にしながら設定してみました。

前提

create-nuxt-appした時点で、ESLint, Prettier, Stylelintは入っているものとします。

バージョン等は下記の通り

package.json

{
  "scripts": {
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint:style": "stylelint \"**/*.{css,scss,sass,html,vue}\" --ignore-path .gitignore",
    "lint:prettier": "prettier --check .",
    "lint": "yarn lint:js && yarn lint:style && yarn lint:prettier",
    "lintfix": "prettier --write --list-different . && yarn lint:js --fix && yarn lint:style --fix"
  },
  // 省略
  "devDependencies": {
    "@babel/eslint-parser": "^7.16.3",
    "@nuxtjs/eslint-config": "^8.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/stylelint-module": "^4.1.0",
    "eslint": "^8.4.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-nuxt": "^3.1.0",
    "eslint-plugin-vue": "^8.2.0",
    "prettier": "^2.5.1",
    "stylelint": "^14.1.0",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-config-recommended-vue": "^1.1.0",
    "stylelint-config-standard": "^24.0.0"
  }
}

ESlintの設定変更

.eslintrc.js

module.exports = {
  // 省略
  rules: {
    'vue/html-indent': ['error', 2],
    'no-unused-vars': 'off', // 使っていない変数あってもOK
    'vue/html-self-closing': 'off', // imgタグのようにタグが１つで完結してもOK
    'vue/max-attributes-per-line': 'off',
    // 不要なカッコは消す
    'no-extra-parens': 1,
    // 無駄なスペースは削除
    'no-multi-spaces': 2,
    // 不要な空白行は削除。2行開けてたらエラー
    'no-multiple-empty-lines': [2, { max: 1 }],
    // 関数とカッコはあけない(function hoge() {/** */})
    'func-call-spacing': [2, 'never'],
    // true/falseを無駄に使うな
    'no-unneeded-ternary': 2,
    // セミコロンは禁止
    semi: [2, 'never'],
    // 文字列はシングルクオートのみ
    quotes: [2, 'single'],
    // varは禁止
    'no-var': 2,
    // jsのインデントは２
    indent: [2, 2],
    // かっこの中はスペースなし！違和感
    'space-in-parens': [2, 'never'],
    // コンソールは許可
    'no-console': 0,
    // カンマの前後にスペース入れる？
    'comma-spacing': 2,
    // 配列のindexには空白入れるな(hogehoge[ x ])
    'computed-property-spacing': 2,
    // キー
    'key-spacing': 2,
    // キーワードの前後には適切なスペースを
    'keyword-spacing': 2,
  },
}

StyleLintの設定

stylelint.config.js

module.exports = {
  // 省略
  rules: {
    'order/properties-alphabetical-order': true, // アルファベット順に
    'block-no-empty': null, // 空のクラスをエラー判定するかどうか
    'at-rule-no-unknown': [
      true, // @include, @mixin, @each, @extendをエラー判定しない
      { ignoreAtRules: ['include', 'mixin', 'each', 'extend'] },
    ],
    'rule-empty-line-before': null, // 各クラスごとに空行を入れるかどうか
    'at-rule-empty-line-before': null, // @の前に空行を入れるかどうか
  },
}

VS Codeの設定

settings.json

{
  // 省略
  // ESLint
  "eslint.workingDirectories": ["./"],
  "eslint.validate": [
    "javascript"
  ],
  // stylelint
  "stylelint.enable": true,
  "stylelint.configBasedir": ".",
  "stylelint.validate": ["css"],
  "css.validate": false,
  "scss.validate": false,
  // Lint On Save
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.organizeImports": true,
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  // prettier
  "[json]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "vetur.validation.template": false
}

参考にしたページ