本指南將引導您使用 ESLint 9.13.0、Prettier 和 TypeScript 配置 Vue.js 項目，以在 Visual Studio Code 中儲存時啟用自動程式碼格式化和 linting。
先建立一個新的 Vue 專案：
npm create vue@latest
導覽至專案目錄：
cd your-project-directory
安裝專案依賴項：
npm install
然後，使用ncu（Node Check Updates）更新專案依賴項：
npx ncu -u npm install
此設定需要在本機或全域安裝以下 NPM 軟體包：
prettier eslint prettier-eslint @typescript-eslint/parser typescript vue-eslint-parser @vue/eslint-config-typescript @vue/eslint-config-prettier
使用 pnpm 或 npm 安裝必要的開發依賴項：
pnpm install -D prettier eslint prettier-eslint @typescript-eslint/parser typescript vue-eslint-parser @vue/eslint-config-typescript @vue/eslint-config-prettier
執行以下指令來設定 ESLint 設定：
npm init @eslint/config@latest
出現提示時，請先進行以下選擇來設定 ESLint：
為了確保 ESLint 使用新的 Flat Config 格式，請確保在 eslint.config.mjs 檔案中包含必要的設定。對此的調整可能取決於您的特定設定。
import globals from 'globals';
import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';
import prettier from 'eslint-plugin-prettier/recommended';
import vueConfigTypescript from '@vue/eslint-config-typescript';
import vueConfigPrettier from '@vue/eslint-config-prettier';
/** @type {import('eslint').Linter.Config[]} */
export default [
{
languageOptions: {
globals: {
...globals.browser,
...globals.node,
},
},
},
// js
pluginJs.configs.recommended,
{
rules: {
'no-unused-vars': 'off',
'no-undef': 'off',
},
},
// ts
...tseslint.configs.recommended,
{
rules: {
'@typescript-eslint/no-unused-vars': 'warn',
'@typescript-eslint/no-explicit-any': 'warn',
},
},
// vue
...pluginVue.configs['flat/recommended'],
{
files: ['*.vue', '**/*.vue'],
languageOptions: {
parserOptions: {
parser: tseslint.parser,
},
},
},
{
rules: {
...vueConfigTypescript.rules,
...vueConfigPrettier.rules,
'prettier/prettier': [
'warn',
{
singleQuote: true,
},
],
'vue/multi-word-component-names': 'off',
'vue/attribute-hyphenation': 'off',
'vue/no-v-html': 'off',
'vue/v-on-event-hyphenation': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
'@typescript-eslint/no-require-imports': 'off',
'@typescript-eslint/no-explicit-any': 'off',
},
},
{
ignores: ['node_modules', '.nuxt', '.output', 'dist'],
},
// prettier
prettier,
{
rules: {
'prettier/prettier': ['warn', { singleQuote: true }],
},
},
];
要使用 Prettier 和 ESLint 啟用儲存時自動格式化，請安裝以下 Visual Studio Code 擴充功能：
要為您的專案推薦擴展，請將其新增至 .vscode/extensions.json 檔案：
{
"recommendations": [
"rvest.vs-code-prettier-eslint"
]
}
設定專案並安裝擴充功能後，重新啟動 Visual Studio Code 以確保自動儲存和自動格式化如預期運作。
您的專案現在應該設定為：
以上是使用 Prettier、TypeScript、Vue.js 和 VSCode 設定 ESLint 自動儲存自動格式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
