Zenn
Open6

nuxt 3(nuxt-bridge)でlint周りの設定

Nuxt
ESLint
Prettier
Stylelint
Daichi HashimuraDaichi Hashimura

Eslint

TypeScriptも利用しているため、まずはts, eslint 関連のpackageをinstall。自分は下記を使っています

yarn add -D eslint eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser @nuxtjs/eslint-config-typescript

package.json にscriptを追加する。

package.json
"scripts": {
    ...
    "lint:js": "eslint --ext .js,.ts,.vue --ignore-path .gitignore ."
    ...
}

.eslintrc.js を追加する。

.eslintrc.js
module.exports = {
  env: {
    browser: true,
    node: true,
    es2021: true,
  },
  extends: [
    '@nuxtjs/eslint-config-typescript',
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/vue3-recommended'
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: { ... },
  overrides: [
    {
      files: ['pages/*.vue'],
      rules: {
        'vue/multi-word-component-names': 'off',
      },
    },
  ],
  ignorePatterns: ['.nuxt/', '.output/', 'dist/', 'public/', '**/*.min.js'],
}

yarn lint:js を実行してみて、問題なくいけた。これでeslint の設定は完了。
Running eslint in the terminal

参考にした記事:

Daichi HashimuraDaichi Hashimura

Prettier

prettier 関連のpackageをinstall

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier @vue/eslint-config-prettier

.eslintrc.jsのextendsに追加する。

.eslintrc.js
{
...
 extends: [
    '@nuxtjs/eslint-config-typescript',
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/vue3-recommended',
    // ここ👇👇👇
    '@vue/eslint-config-prettier',
  ],
}
...

package.json にscriptを追加する。

package.json
"scripts": {
    ...
    "lint:js": "eslint --ext .js,.ts,.vue --ignore-path .gitignore .",
    "lint:prettier": "prettier --check ."
    ...
}

.prettierrc は必要なのを追加する。.prettierignore は.gitignore とほぼ同じもの。

.prettierrc
{
  "semi": false,
  "singleQuote": true,
  "endOfLine": "lf"
  ...
}

yarn lint:prettier を実行してみて、問題なくいけた。これでprettier の設定も完了。
Running prettier in the terminal

Daichi HashimuraDaichi Hashimura

Stylelint

stylelint 関連のpackageをinstall

yarn add -D stylelint stylelint-config-recommended stylelint-config-recommended-vue stylelint-config-standard

package.json にscriptを追加する。

package.json
"scripts": {
    ...
    "lint:js": "eslint --ext .js,.ts,.vue --ignore-path .gitignore .",
    "lint:prettier": "prettier --check .",
    "lint:style": "stylelint **/*.{css,scss,sass,html,vue} --ignore-path .gitignore",
    ...
}

.stylelintrc.js の設定を追加する。

.stylelintrc.js
module.exports = {
  extends: [
    'stylelint-config-recommended',
    'stylelint-config-standard',
    'stylelint-config-recommended-vue',
  ]
}

これで実行してみると、下記のエラーが発生する😵。。。

When linting something other than CSS, you should install an appropriate syntax, e.g. "postcss-scss", and use the "customSyntax" option

調べてみると、なので自分でpluginをinstallしないといけなくなった😣。

Stylelint 13まではシンタックス自動類推機能のために各シンタックス用のPostCSSプラグインを依存ライブラリとして含んでいたが、Stylelint 14からは含まなくなった。 そのため、ユーザが自分でプラグインをインストールし、シンタックスを指定する必要がある。

解決方法２つありました

  1. エラーのsuggestionのようにpostcss-scssinstallして、customSyntax optionの追加
yarn add -D postcss-scss

.stylelintrc.js の設定にcustomSyntaxoptionの追加する。

.stylelintrc.js
module.exports = {
  customSyntax: "postcss-scss",
  extends: [
    'stylelint-config-recommended',
    'stylelint-config-standard',
    'stylelint-config-recommended-vue',
  ]
}
  1. stylelint-config-recommended-scssを利用する。The recommended shareable SCSS config for stylelint. らしい。
yarn add -D stylelint-config-recommended-scss

postcss-scss が依存ライブラリとして自動でインストールされる。 また、"customSyntax": "postcss-scss" 設定も継承される。コミュニティが推奨するルールセットも有効になる。
みたいですのでextendsに追加するだけでおっけ!

.stylelintrc.js
module.exports = {
  extends: [
    'stylelint-config-recommended',
    'stylelint-config-standard',
    'stylelint-config-recommended-vue',
    'stylelint-config-recommended-scss'
  ]
}

これで問題ないでしょうと思ってもう一回実行してみると、今度は😵

layouts/default.vue
✖  Unknown word  CssSyntaxError

色々調べて、これで解決

yarn add -D postcss-html
.stylelintrc.js
module.exports = {
  extends: [
    'stylelint-config-recommended',
    'stylelint-config-standard',
    'stylelint-config-recommended-vue',
    'stylelint-config-recommended-scss',
  ],
  // ここ
  overrides: [
    {
      files: ['**/*.vue'],
      customSyntax: 'postcss-html',
    },
  ],
}

もう一回yarn lint:style 実行してみると問題なくいけた、これでstylelintの設定も完了!🎉
Running stylelint in the terminal

参考にした記事:

Daichi HashimuraDaichi Hashimura

最後にはまとめてlinter実行するscriptとformatするためのscript追加

package.json
"scripts": {
    ...
    "lint:js": "eslint --ext .js,.ts,.vue --ignore-path .gitignore .",
    "lint:prettier": "prettier --check .",
    "lint:style": "stylelint **/*.{css,scss,sass,html,vue} --ignore-path .gitignore",
    "lint": "yarn lint:js && yarn lint:style && yarn lint:prettier",
    "lint:fix": "prettier --write --list-different . && yarn lint:js --fix && yarn lint:style --fix"
    ...
}
Daichi HashimuraDaichi Hashimura

stylelintのエラーなどをvscodeで確認できるために、stylelint extension 追加して、vscodeのsettings.jsonにoptions追加すると、確認できる

settings.json
{
  "stylelint.enable": true,
  "stylelint.snippet": ["css", "postcss", "scss", "vue"],
  "stylelint.validate": ["css", "postcss", "scss", "vue"]
}

stylelint lint error in VS code