Vue Vite 項目增加 eslint 和 prettier
Eslint 版本為 8.X
1. 安裝 8.X 版本的 eslint
pnpm i eslint@^8.57.0 -D 2. 安裝 eslint 以及 prettier 以及一堆依賴
pnpm i eslint eslint-plugin-vue @vue/eslint-config-prettier prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-import -D3. 安裝 TS 依賴
pnpm i @typescript-eslint/parser @typescript-eslint/eslint-plugin -D4. 初始化 eslint
npx eslint --init 4.1. 選擇 eslint 的校驗模式
選擇第三個
4.2. 選擇項目類型
選擇第一個 ESM 規範
4.3. 選擇項目框架
我們是 vue，選擇第二個
4.4. 是否使用 TS
項目中建議使用 TS
4.5. 運行在哪？
我這個在瀏覽器
4.6. 項目風格？
選擇第二個
4.7. 選擇 config 文件類型
我這邊選擇的是 JS
4.8. 縮進
tabs
4.9. 單引號雙引號
4.10. 行尾？
4.11. 是否需要分號？
習慣了不要分號
4.12. 是否添加依賴
YES
4.13. 安裝方式
pnpm 更快一些
5. .eslintrc.cjs 文件
5.1. 默認生成
module.exports = {
'env': {
'browser': true,
'es2021': true
},
'extends': [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:vue/vue3-essential'
],
'overrides': [
{
'env': {
'node': true
},
'files': [
'.eslintrc.{js,cjs}'
],
'parserOptions': {
'sourceType': 'script'
}
}
],
'parserOptions': {
'ecmaVersion': 'latest',
'parser': '@typescript-eslint/parser',
'sourceType': 'module'
},
'plugins': [
'@typescript-eslint',
'vue'
],
'rules': {
'indent': [
'error',
'tab'
],
'linebreak-style': [
'error',
'unix'
],
'quotes': [
'error',
'single'
],
'semi': [
'error',
'never'
]
}
}5.2. 習慣的配置
module.exports = {
root: true,
globals: {
defineOptions: "readonly",
defineProps: "readonly",
defineEmits: "readonly",
defineExpose: "readonly",
withDefaults: "readonly",
chrome: true,
},
env: {
browser: true,
node: true,
node: true,
},
parser: "vue-eslint-parser",
parserOptions: {
parser: "@typescript-eslint/parser",
ecmaVersion: "latest",
sourceType: "module",
ecmaFeatures: {
jsx: true,
},
},
extends: [
"plugin:vue/vue3-recommended",
"plugin:@typescript-eslint/recommended",
"prettier",
"plugin:prettier/recommended",
],
plugins: ["import"],
settings: {
"import/core-modules": [
"uno.css",
"~icons/*",
"virtual:svg-icons-register",
],
},
rules: {
"no-empty": 0,
"@typescript-eslint/no-empty-function": 0,
"@typescript-eslint/no-empty-interface": 0,
"@typescript-eslint/no-explicit-any": 0,
"@typescript-eslint/no-var-requires": 0,
"@typescript-eslint/no-non-null-assertion": 0,
"vue/multi-word-component-names": 0,
"vue/no-unused-components": 1,
"vue/valid-template-root": 1,
semi: ['error', 'never'],
"import/order": [
"error",
{
"newlines-between": "never",
// 對導入模塊進行分組
groups: [
"builtin",
"external",
"internal",
"parent",
"sibling",
"index",
],
// 通過路徑自定義分組
pathGroups: [
{
pattern: "vue",
group: "external",
position: "before",
},
{
pattern: "vue-router",
group: "external",
position: "before",
},
{
pattern: "pinia",
group: "external",
position: "before",
},
{
pattern: "naive-ui",
group: "external",
position: "before",
},
{
pattern: "@/constants",
group: "internal",
position: "before",
},
{
pattern: "@/config",
group: "internal",
position: "before",
},
{
pattern: "@/settings",
group: "internal",
position: "before",
},
{
pattern: "@/components",
group: "internal",
position: "before",
},
{
pattern: "@/router",
group: "internal",
position: "before",
},
{
pattern: "@/service",
group: "internal",
position: "before",
},
{
pattern: "@/store",
group: "internal",
position: "before",
},
{
pattern: "@/hooks",
group: "internal",
position: "before",
},
{
pattern: "@/utils",
group: "internal",
position: "before",
},
{
pattern: "@/assets",
group: "internal",
position: "before",
},
{
pattern: "@/**",
group: "internal",
position: "before",
},
],
pathGroupsExcludedImportTypes: [
"vue",
"vue-router",
"pinia",
"naive-ui",
],
},
],
},
};6. .eslintignore 文件
需要過濾的文件
*.sh
*.woff
*.tff
*.html
*.yaml
*.md
node_modules
.vscode
.idea
.husky
/public
/docs
/bin
/app/public
components.d.ts /**
route.d.ts
manifest.json
*.json
7. .prettierrc.js 文件
module.exports = {
trailingComma: 'none',
singleQuote: true,
semi: true,
bracketSpacing: true,
printWidth: 100,
tabWidth: 2,
}8. .prettierrc.json 文件
{
"$schema": "https://json.schemastore.org/prettierrc",
"semi": false,
"tabWidth": 2,
"singleQuote": true,
"printWidth": 100,
"trailingComma": "none"
}9. .prettierignore 文件
# 忽略格式化文件 (根據項目需要自行添加)
node_modules10. .vscode/extensions.json 文件
{
"recommendations": [
"Vue.vscode-typescript-vue-plugin",
"antfu.iconify", // iconify 圖標顯示
"antfu.unocss", // unocss 代碼提示
"christian-kohler.path-intellisense", // 文件路徑提示/補全
"dbaeumer.vscode-eslint", // eslint
"esbenp.prettier-vscode", // prettier
"eamodio.gitlens", // git
"editorconfig.editorconfig", // editorconfig
"mikestead.dotenv", // .env支持
"naumovs.color-highlight", // 顏色高亮
"steoates.autoimport",
"vue.volar" // vue3
]
}11. .vscode/settings.json 文件
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"editor.fontLigatures": true,
"editor.formatOnSave": false,
"editor.guides.bracketPairs": "active",
"editor.quickSuggestions": {
"strings": true
},
"eslint.enable": true,
"editor.tabSize": 2,
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"html",
"json",
"jsonc",
"json5",
"yaml",
"yml",
"markdown"
],
"files.associations": {
"*.env.*": "dotenv"
},
"files.eol": "\n",
"path-intellisense.mappings": {
"@": "${workspaceFolder}/src",
"~@": "${workspaceFolder}/src"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "Vue.volar"
}
}
