Nuxt3 - ESLint 和 Stylelint 設定檔大分享

eslint.config.js

import globals from "globals";
import pluginVue from 'eslint-plugin-vue'
import eslintPluginVueScopedCSS from 'eslint-plugin-vue-scoped-css';

export default [
  ...pluginVue.configs['flat/recommended'],
  ...eslintPluginVueScopedCSS.configs['flat/recommended'],
  {
    languageOptions: {
      ecmaVersion: 2022,
      sourceType: "module",
      globals: {
        ...globals.browser,
        myCustomGlobal: "readonly"
      }
    },

    files: ["**/*.js", "**/*.vue"],
    rules: {
      'vue/multi-word-component-names': 'off',
      'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
      'space-before-blocks': ['error', 'always'],
      'keyword-spacing': ['error', { 'before': true, 'after': true }],
      'space-infix-ops': ['error', { 'int32Hint': false }],
      'indent': [ 'error', 2, { 'SwitchCase': 1 }],

      'vue-scoped-css/no-unused-selector': 'error', // 防止未使用的 CSS 選擇器
      'vue/html-indent': ['error', 2], // 控制 HTML 標籤的縮排
      'vue/singleline-html-element-content-newline': 'off', // 控制單行元素的格式
    }
  }
]

.stylelintrc.json

{
  "plugins": [
		"@stylistic/stylelint-plugin"
	],
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-recommended-vue"
  ],
  "rules": {
    "block-no-empty": true,
    "max-nesting-depth": 3,
    "no-duplicate-selectors": true,
    "string-no-newline":true,
    "function-name-case": "lower",
    "value-keyword-case": "lower",
    "@stylistic/indentation": 2
  }
}

參考資料

1. https://github.com/stylelint-stylistic/stylelint-stylistic (stylelint 15汰除規則替代)
2. https://github.com/stylelint/stylelint/issues/6961 (stylelint 15汰除規則討論)

如果對內容有任何問題或想法歡迎提出來，我們可以研究或延伸討論的文章