一.npm引入
//eslint
"eslint": "^8.35.0",
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.9.0",
"@typescript-eslint/eslint-plugin": "^5.54.0",
"@typescript-eslint/parser": "^5.54.0",
"@typescript-eslint/typescript-estree": "^6.9.0",
"vite-plugin-eslint": "^1.8.1",
"vue-eslint-parser": "^9.1.0",
//stylelint
"stylelint": "^14.14.0",
"stylelint-config-prettier": "^9.0.5",
"stylelint-config-recommended": "^9.0.0",
"stylelint-config-recommended-scss": "^8.0.0",
"stylelint-config-recommended-vue": "^1.4.0",
"stylelint-config-standard": "^29.0.0",
"stylelint-order": "^6.0.2",
"stylelint-scss": "^4.4.0",
"vite-plugin-stylelint": "^4.2.0",
//prettier
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-prettier": "^4.2.1",
"prettier": "^2.8.4",
"stylelint-config-prettier": "^9.0.5",
//ts
"typescript": "^4.9.4",二.創(chuàng)建以下5個文件放在項目頂層
.eslintignore；.eslintrc.cjs；.prettierignore；.prettierrc.cjs；.stylelintrc.cjs，具體文件內(nèi)容如下
.eslintrc.cjs
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
globals: {
wx: "readonly",
uni: "readonly"
},
extends: ["eslint:recommended", "plugin:vue/vue3-essential", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended"],
overrides: [],
parser: "vue-eslint-parser",
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
parser: "@typescript-eslint/parser"
},
plugins: ["vue", "@typescript-eslint", "prettier"],
rules: {
indent: ["warn", "tab", { ignoredNodes: ["ConditionalExpression"] }],
"no-var": "error",
"no-eval": "error",
"no-alert": "error",
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
"no-debugger": "warn",
"default-case": "error", // 要求 switch 語句中有 default 分支
quotes: ["warn", "double", { allowTemplateLiterals: true }], // 使用單/雙引號
"no-extra-parens": "error", // 禁止不必要的括號
"consistent-return": ["error", { treatUndefinedAsUnspecified: false }], // 要求使用一致的 return 語句
"default-case": "warn", // 要求 Switch 語句中有 Default 分支
curly: ["error", "multi-line"], // 多行語句使用大括號
"no-empty-function": "error", // 禁止空函數(shù)
"no-eq-null": "error", // 禁止與 null 進行比較, 必須使用 !== 和 ===
"no-floating-decimal": "warn", // 禁止不必要的浮點小數(shù)
"no-implied-eval": "error", // 禁用隱式的eval()
"no-labels": "error", // 禁止標(biāo)簽語法
"no-lone-blocks": "error", // 禁用不必要的嵌套塊
"no-multi-spaces": "error", // 禁止不必要的空格
"no-shadow": "off", // 禁止未使用變量
"no-undef": "off", // 允許未知全局變量-防止ts聲明報錯
"no-undef-init": "warn", // 禁止將變量初始化為 undefined
"block-spacing": "error", // 括號前后加空格
"brace-style": "error", // 強制在代碼塊中使用一致的大括號風(fēng)格
camelcase: "error", // 強制使用駝峰命名
"comma-dangle": ["error", "never"], // 禁止末尾逗號
"comma-spacing": "error", // 逗號后強制空格
"computed-property-spacing": ["warn", "never"], // 強制在計算的屬性的方括號中使用一致的空格
"func-style": ["error", "expression"], // declaration 或 expression 強制一致地使用 function 聲明或表達式
indent: ["off", "tab"], // 使用tab縮進
"key-spacing": "warn", // 對象key之后使用一致的空格
"keyword-spacing": "warn", // 強制在關(guān)鍵字前后使用一致的空格
"new-parens": "warn", // new對象需要有括號
"no-lonely-if": "error", // 禁止 if 作為唯一的語句出現(xiàn)在 else 語句中
"no-mixed-operators": "warn", // 禁止混合使用不同的操作符
"no-nested-ternary": "warn", // 禁用嵌套的三元表達式
"no-trailing-spaces": "error", // 禁用行尾空格
"no-whitespace-before-property": "warn", // 禁止屬性前有空白
"one-var": ["error", "never"], // 前置變量分開聲明
semi: ["error", "never"], // 不使用分號
"space-in-parens": ["error", "never"], // 小括號前后不加空格
"prefer-rest-params": "off",
// ts
"@typescript-eslint/array-type": ["warn", { default: "array" }], // 數(shù)組聲明使用Array<any> 而不是 any[]
"@typescript-eslint/ban-ts-comment": "off", // 可以使用@ts-ignore注釋
"@typescript-eslint/no-explicit-any": "warn", // any警告
"@typescript-eslint/triple-slash-reference": "off", // 啟用三斜杠引用
"@typescript-eslint/no-non-null-assertion": "off", // 允許非空聲明賦值，防止onLoad報錯
// vue
"vue/multi-word-component-names": "off", // 允許單詞文件命名
"vue/script-indent": "off", // 允許script縮進一行 原配置["warn", "tab", { "baseIndent": 1 }]
// prettier
"prettier/prettier": "error",
"arrow-body-style": "off",
"prefer-arrow-callback": "off"
}
}
.eslintignore
.vscode
node_modules
*.md
*.woff
*.ttf
.idea
dist
.husky.stylelintrc.cjs
module.exports = {
extends: ["stylelint-config-standard", "stylelint-config-recommended-scss", "stylelint-config-recommended-vue", "stylelint-config-prettier"],
plugins: ["stylelint-order"],
ignoreFiles: ["**/*.js", "**/*.jsx", "**/*.tsx", "**/*.ts", "**/*.json", "**/*.md"],
rules: {
"at-rule-no-unknown": [
true,
{
// 禁止未知規(guī)則
ignoreAtRules: ["function", "if", "else", "else-if", "each", "include", "mixin", "use"]
}
],
"at-rule-empty-line-before": [
"always",
{
// 規(guī)則之前要求空行
except: ["blockless-after-same-name-blockless", "first-nested"],
ignore: ["after-comment"],
ignoreAtRules: ["else", "else-if"]
}
],
"color-hex-case": null, // 顏色hex大小寫無要求
"color-hex-length": null, // 不要求顏色單位長短
"declaration-block-trailing-semicolon": null, // css語句末尾加分號 棄用風(fēng)險
"function-no-unknown": [true, { ignoreFunctions: ["map.get"] }], // 禁止未知函數(shù)
"import-notation": "string", // 使用string模式引入
"no-empty-source": null, // 允許空格
"no-descending-specificity": null,
"no-duplicate-selectors": true, // 禁止重復(fù)標(biāo)簽
"number-leading-zero": "always", // 禁止小數(shù)點前無0 棄用風(fēng)險
"property-no-unknown": true, // 禁止出現(xiàn)未知屬性
"rule-empty-line-before": "always", // 每個樣式聲明之間需要換行
"selector-pseudo-class-no-unknown": true, // 禁止未知偽類選擇器
"selector-pseudo-element-no-unknown": true, // 禁止未知未知偽元素選擇器
"selector-type-no-unknown": null, // 允許未知選擇器（微信標(biāo)簽）
"string-quotes": "double", // 使用雙引號 棄用風(fēng)險
"unit-case": "lower", // 單位使用小寫 棄用風(fēng)險
"unit-no-unknown": [true, { ignoreUnits: ["rpx"] }], // 允許使用rpx單位
"scss/at-import-partial-extension": "always", // import使用擴展名
// "scss/no-global-function-names": null,
"order/properties-order": [
// 順序
"position",
"top",
"right",
"bottom",
"left",
"z-index",
"display",
"justify-content",
"align-items",
"flex-shrink",
"float",
"clear",
"overflow",
"overflow-x",
"overflow-y",
"width",
"min-width",
"max-width",
"height",
"min-height",
"max-height",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"font-size",
"font-family",
"text-align",
"text-justify",
"text-indent",
"text-overflow",
"text-decoration",
"white-space",
"color",
"background",
"background-position",
"background-repeat",
"background-size",
"background-color",
"background-clip",
"border",
"border-style",
"border-width",
"border-color",
"border-top-style",
"border-top-width",
"border-top-color",
"border-right-style",
"border-right-width",
"border-right-color",
"border-bottom-style",
"border-bottom-width",
"border-bottom-color",
"border-left-style",
"border-left-width",
"border-left-color",
"border-radius",
"opacity",
"filter",
"list-style",
"outline",
"visibility",
"box-shadow",
"text-shadow",
"resize",
"transition",
"content"
]
}
}
.prettierrc.cjs
module.exports = {
arrowParens: "avoid", // 單一箭頭函數(shù)不加括號
bracketSameLine: true, // 尖括號不換行
bracketSpacing: true, // 大括號前后加空格
endOfLine: "auto", // 句尾換行不報錯
htmlWhitespaceSensitivity: "css", // html敏感
jsxSingleQuote: false, // jsx使用雙引號
jsxBracketSameLine: true, // jsx尖括號不換行
printWidth: 160,
quoteProps: "as-needed", // 必要時對象key值加分號
requirePragma: false, // 不需要寫文件開頭的 @prettier
semi: false, // 句尾無分號
singleQuote: false, // 使用雙引號
singleAttributePerLine: false, // vue文件允許一行多個屬性
tabWidth: 4,
trailingComma: "none", // 末尾無逗號
useTabs: true, // tab縮進
vueIndentScriptAndStyle: true // style和script標(biāo)簽?zāi)J縮進
}
.prettierignore
/dist/*
/.vscode/*
/.husky/*
/node_modules/**
/src/static/**
三.vite.config.ts引入
import viteEslint from "vite-plugin-eslint"
import viteStylelint from "vite-plugin-stylelint"
plugins: [vue(), viteEslint({ failOnError: false, failOnWarning: true }), viteStylelint({ fix: true })],四.最后文章來源：http://www.zghlxwxcb.cn/news/detail-766088.html
執(zhí)行一次npx prettier . --write，格式化一次code，如果是使用的Vscode編輯器，格式化代碼的時候選取prettier相關(guān)的格式方法文章來源地址http://www.zghlxwxcb.cn/news/detail-766088.html
到了這里，關(guān)于eslint+stylelint+prettier全流程配置的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
