ゆうゆう@投資でFIREのLogo

Nuxt で ESLint Prettier Stylelint の設定

プログラミング
ゆうゆう@投資でFIRE

基本の設定

npm install --save-dev eslint prettier stylelint

 

buildModules の設定

npm install --save-dev  @nuxtjs/eslint-module @nuxtjs/stylelint-module


nuxt.config.js

buildModules: [
  '@nuxtjs/eslint-module',
  '@nuxtjs/stylelint-module',
],


※ 正直、これが必要なのか?ですが一応、入れてます。

ESLint の設定

npm install --save-dev babel-eslint @nuxtjs/eslint-config eslint-config-prettier eslint-plugin-nuxt


babel-eslint => "babel-eslint"
@nuxtjs/eslint-config => "@nuxtjs"
eslint-config-prettier => "prettier"
eslint-plugin-nuxt => "plugin:nuxt/recommended"


.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module',
  },
  extends: ['@nuxtjs', 'prettier', 'plugin:nuxt/recommended'],
  plugins: [],
  rules: { 'vue/no-v-html': 'off' },
}


Prettier の設定

.prettierrc

{
 "printWidth": 120,
 "semi": false,
 "singleQuote": true
}


Stylelint の設定

npm install --save-dev stylelint-config-recommended stylelint-config-standard stylelint-config-prettier


stylelint-config-recommended => "stylelint-config-recommended"
stylelint-config-standard => "stylelint-config-standard"
stylelint-config-prettier => "stylelint-config-prettier"


stylelint.config.js

module.exports = {
  plugins: [],
  extends: ['stylelint-config-recommended', 'stylelint-config-standard', 'stylelint-config-prettier'],
  rules: {
    'block-no-empty': null,
    'at-rule-no-unknown': [
      true,
      { ignoreAtRules: ['include', 'mixin', 'each', 'extend'] },
    ],
    'rule-empty-line-before': null,
    'at-rule-empty-line-before': null,
  },
}


Git hooks の設定

npm install --save-dev husky lint-staged


Git でPush した際に、フォーマットを実行させる設定です。

package.json

{
  "name": "",
  "version": "1.0.0",
  "private": true,
  "scripts": {

    ・・・

    "generate": "nuxt generate --fail-on-error",
    "lint:prettier": "prettier --check .",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint:style": "stylelint \"**/*.{vue,css,scss}\" --ignore-path .gitignore",
    "lint-fix": "npm run lint:prettier -- --write && npm run lint:js -- --fix && npm run lint:style -- --fix",
    "functions:build": "netlify-lambda build functions",
    "functions:serve": "netlify-lambda serve functions"
  },
  "dependencies": {

    ・・・

  },
  "devDependencies": {

    ・・・

    "husky": "^7.0.1",
    "lint-staged": "^11.1.2",

    ・・・

  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,vue,json,css,scss}": [
      "lint-fix"
    ]
  }
}

ABOUT ME

ゆうゆう@投資でFIRE
子供部屋おじさんが支出を抑えFIREを目指して奮闘しています。タコ足配当のUSリートを毎日1万円買い続けてます。オルカン/V全米/眼力/国内リートをクレカ積立で、個別株/FX/CFDも裁量でやってたりします。どうぞ、よろしくお願いします。
ゆうゆう@投資でFIRE Twitter
ゆうゆう@投資でFIREのTwitterです。
https://twitter.com/uu104fire
Twitterを見る

ゆうゆう@投資でFIREとは

  1. 子供部屋おじさんが支出を抑えFIREを目指して奮闘しています。

  2. タコ足配当のUSリートを毎日1万円買い続けてます。

  3. オルカン/V全米/眼力/国内リートをクレカ積立してます。

  4. 個別株/FX/CFDも裁量でやってたりします。