在 Nuxt 3.11 使用 ESLint 程式碼檢查工具和 ESLint Stylistic 格式化工具

ESLint
, , , ,

安裝依賴

安裝依賴。

1
npm i eslint @stylistic/eslint-plugin eslint-plugin-vue typescript-eslint -D

新增 eslint.config.js 檔。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import stylistic from '@stylistic/eslint-plugin';
import pluginVue from 'eslint-plugin-vue';
import tseslint from 'typescript-eslint';

export default [
  ...tseslint.configs.recommended,
  ...pluginVue.configs['flat/recommended'],
  stylistic.configs.customize({
    semi: true,
    jsx: true,
    braceStyle: '1tbs',
  }),
  {
    ignores: [
      '.nuxt/**',
    ],
  },
  {
    rules: {
      'no-console': 1,
    },
  },
];

新增 .vscode/settings.json 檔。

1
2
3
4
{
  "editor.formatOnSave": true,
  "eslint.experimental.useFlatConfig": true
}

參考資料