Nuxt.js에 Pretter ESLint를 올바르게 넣습니다.

네, 그것도 좋아요.

어쨌든 환경 구축

{
  (中略)
  "scripts": {
    (中略)
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint:style": "stylelint \"**/*.{vue,css}\" --ignore-path .gitignore",
    "lint": "yarn lint:js && yarn lint:style"
  },
  "dependencies": {
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/stylelint-module": "^4.1.0",
    "nuxt": "^2.15.8"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.16.3",
    "@nuxtjs/eslint-config": "^8.0.0",
    "eslint": "^8.4.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-nuxt": "^3.1.0",
    "postcss-html": "^1.3.0",
    "prettier": "^2.5.1",
    "sass": "^1.43.4",
    "sass-loader": "^10.2.0",
    "stylelint": "^14.1.0",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-config-recess-order": "^3.0.0",
    "stylelint-config-standard-scss": "^3.0.0"
  }
}

1. Pretter 설치

yarn add -D prettier

2.ESlint 등의 설치

yarn add @nuxtjs/eslint-module

yarn add -D eslint eslint-config-prettier 
@babel/eslint-parser eslint-plugin-nuxt @nuxtjs/eslint-config

3. Styleant 설치 등

yarn add @nuxtjs/stylelint-module

yarn add -D stylelint stylelint-config-prettier

yarn add -D stylelint-config-order stylelint-config-standard

yarn add -D sass sass-loader@^10.2.0 
stylelint-config-recess-order stylelint-config-standard-scss

설정

1. ESlight 설정

module.exports = {
  root: true,
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  extends: ['@nuxtjs', 'plugin:nuxt/recommended', 'prettier'],
  parserOptions: {
    parser: '@babel/eslint-parser',
    requireConfigFile: false,
  },
  plugins: [],
  rules: {
    semi: [2, 'never'],
    'no-unused-vars': 'off',
    'no-console': 'off',
    'no-sparse-arrays': 'off',
    'array-callback-return': 0,
    'import/no-named-as-default': 0,
    // vue settings
    'vue/script-setup-uses-vars': 0,
    'vue/attribute-hyphenation': 0,
    'vue/no-v-html': 0,
    'vue/multi-word-component-names': 0,
    // nuxt settings
    'nuxt/no-globals-in-created': 0,
    'nuxt/no-env-in-hooks': 0,
  },
}

1-1. ESLit 자체 설정

개요

build: {
  extend(config, ctx) {
    if (ctx.isDev && ctx.isClient) {
      config.module.rules.push({
        enforce: 'pre',
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /(node_modules)/
      })
    }
  }
}

1-2. ESLight 및 Preettier 공동 작업을 위한 설정

{
  "extends": ['prettier'] // 末尾に記述する v8.0.0からは 'prettier'のみでOK
}

2. Styleant 설정

module.exports = {
  customSyntax: 'postcss-html',
  extends: [
    'stylelint-config-standard-scss',
    'stylelint-config-recess-order',
    'stylelint-config-prettier'
  ],
  plugins: [],
  ignoreFiles: ['**/node_modules/**', '**/.nuxt/**', '**/dist/**'],
  rules: {
    'at-rule-no-unknown': false,
    'scss/at-rule-no-unknown': true,
    'scss/comment-no-empty': null,
    'string-quotes': 'single',
    'block-no-empty': null,
    'number-leading-zero': null,
    'color-hex-length': 'short',
    'color-no-invalid-hex': true,
    indentation: 2,
    'length-zero-no-unit': true,
    'media-feature-name-no-vendor-prefix': true,
    'shorthand-property-no-redundant-values': true,
    'no-invalid-position-at-import-rule': null,
    'no-irregular-whitespace': null,
    'selector-class-pattern': null,
    'property-no-unknown': null,
    // prettierのインラインスタイルの末尾のコロンを削除するとコンフリクトするため、回避設定
    'declaration-block-trailing-semicolon': null,
    // ::v-deepエラー回避
    'selector-pseudo-class-no-unknown': null
  }
}

2-1. stylent 자체 설정

개요

문법 검사 규칙 집합

{
  "extends": ["stylelint-config-standard"]
}

{
   "extends": ["stylelint-config-recommended"]
}

정렬 규칙 세트

{
  "plugins": ['stylelint-order'],
  "rules": { 'order/properties-alphabetical-order': true } //ABC順に並べる
}

{
  "extends": ['stylelint-config-recess-order']
}

2-2. 스타일링과 프리티어의 협업을 위한 설정

Type script 지원

{
  "root": true,
  "env": {
    "browser": true,
    "es6": true,
    "node": true,
  },
  "extends": ["@nuxtjs/eslint-config-typescript", "plugin:nuxt/recommended", "prettier"],
  "parserOptions": {
    "ecmaVersion": 13,
    "parser": "@typescript-eslint/parser",
    "requireConfigFile": false,
  }
}

덤

{
  "typescript.format.insertSpaceAfterSemicolonInForStatements": false,
  "javascript.format.insertSpaceAfterSemicolonInForStatements": false,
  "editor.tabSize": 2,
  "editor.hover.enabled": false,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true,
    "source.fixAll.eslint": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "vetur.format.enable": false,
  "editor.guides.bracketPairs": true,
  "git.ignoreLimitWarning": true,
  "stylelint.validate": ["css", "scss"],
  "css.validate": false,
  "scss.validate": false
}