準(zhǔn)備
教程
安裝eslint
官網(wǎng)
vue-eslint
ts-eslint
安裝eslint
yarn add eslint -D
生成配置文件
npx eslint --init
安裝其他插件
yarn add -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser vue-eslint-parser
修改.eslintrc.cjs
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
jest: true,
},
/* 指定如何解析語法 */
parser: "vue-eslint-parser",
parserOptions: {
ecmaVersion: "latest",
parser: "@typescript-eslint/parser",
sourceType: "module",
},
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:vue/vue3-essential",
],
overrides: [
{
env: {
node: true,
},
files: [".eslintrc.{js,cjs}"],
parserOptions: {
sourceType: "script",
},
},
],
plugins: ["@typescript-eslint", "vue"],
rules: {
// 參考 https://typescript-eslint.io/
// 禁止// @ts-ignore
"@typescript-eslint/ban-ts-ignore": "off",
//要求函數(shù)和類方法有顯式返回類型。
"@typescript-eslint/explicit-function-return-type": "off",
//禁用any類型
"@typescript-eslint/no-explicit-any": "error",
//除 import 語句外，不允許使用 require 語句。
"@typescript-eslint/no-var-requires": "off",
//禁止空函數(shù)
"@typescript-eslint/no-empty-function": "off",
//在定義變量之前禁止使用變量。
"@typescript-eslint/no-use-before-define": "off",
//禁止 @ts-<directive> 注釋或要求指令后有描述。
"@typescript-eslint/ban-ts-comment": "off",
//禁止某些類型。
"@typescript-eslint/ban-types": "off",
//禁止使用 ! 進(jìn)行非空斷言后綴運(yùn)算符。
"@typescript-eslint/no-non-null-assertion": "off",
//要求導(dǎo)出函數(shù)和類的公共類方法顯式返回和參數(shù)類型。
"@typescript-eslint/explicit-module-boundary-types": "off",
// 參考 https://eslint.vuejs.org/rules/
//強(qiáng)制執(zhí)行自定義事件名稱的特定大小寫
"vue/custom-event-name-casing": "off",
//強(qiáng)制執(zhí)行屬性順序
"vue/attributes-order": "off",
//強(qiáng)制每個(gè)組件都應(yīng)位于自己的文件中
"vue/one-component-per-file": "off",
//不允許在標(biāo)簽的右括號之前換行
"vue/html-closing-bracket-newline": "off",
//強(qiáng)制每行的最大屬性數(shù)
"vue/max-attributes-per-line": "off",
//需要在多行元素的內(nèi)容之前和之后換行
"vue/multiline-html-element-content-newline": "off",
//需要在單行元素的內(nèi)容之前和之后換行
"vue/singleline-html-element-content-newline": "off",
//對模板中的自定義組件強(qiáng)制執(zhí)行屬性命名樣式
"vue/attribute-hyphenation": "off",
//強(qiáng)制執(zhí)行自關(guān)閉風(fēng)格
"vue/html-self-closing": "off",
//禁止向模板添加多個(gè)根節(jié)點(diǎn)
"vue/no-multiple-template-root": "off",
"vue/require-default-prop": "off",
//禁止向自定義組件中使用的 v-model 添加參數(shù)
"vue/no-v-model-argument": "off",
//禁止使用箭頭函數(shù)來定義觀察者
"vue/no-arrow-functions-in-watch": "off",
//禁止 <template> 上的key屬性
"vue/no-template-key": "off",
//禁止使用v-html以防止XSS攻擊
"vue/no-v-html": "off",
//支持 <template> 中的注釋指令
"vue/comment-directive": "off",
//禁止 <template> 中出現(xiàn)解析錯(cuò)誤
"vue/no-parsing-error": "off",
//禁止使用已棄用的 .native 修飾符（在 Vue.js 3.0.0+ 中）
"vue/no-deprecated-v-on-native-modifier": "off",
//要求組件名稱始終為多個(gè)單詞
"vue/multi-word-component-names": "off",
// 參考 http://eslint.cn/docs/rules/
//禁止添加論據(jù)v-model 用于定制組件
"no-v-model-argument": "off",
//禁止使用不必要的轉(zhuǎn)義字符
"no-useless-escape": "off",
//禁止稀疏數(shù)組
"no-sparse-arrays": "off",
//禁止直接在對象上調(diào)用某些 Object.prototype 方法
"no-prototype-builtins": "off",
//禁止條件中的常量表達(dá)式
"no-constant-condition": "off",
//在定義變量之前禁止使用變量
"no-use-before-define": "off",
//禁止指定的全局變量
"no-restricted-globals": "off",
//不允許指定的語法
"no-restricted-syntax": "off",
//在生成器函數(shù)中圍繞*運(yùn)算符強(qiáng)制執(zhí)行一致的間距
"generator-star-spacing": "off",
//不允許在return、throw、continue和break語句之后出現(xiàn)無法訪問的代碼
"no-unreachable": "off",
//vue2只有一個(gè)節(jié)點(diǎn)但是vue3支持多個(gè)
"no-multiple-template-root": "off",
//該規(guī)則旨在消除未使用的變量，函數(shù)和函數(shù)的參數(shù)。
"no-unused-vars": "error",
//禁止case聲明
"no-case-declarations": "off",
//禁止console
"no-console": "error",
},
};
添加.eslintignore
*.sh
node_modules
lib
*.md
*.scss
*.woff
*.ttf
.vscode
.idea
dist
mock
public
bin
build
config
index.html
src/assets
測試
也可以執(zhí)行查看結(jié)果
yarn eslint .
安裝prettier
官網(wǎng)
yarn add -D eslint-plugin-prettier prettier eslint-config-prettier
添加.prettierrc.cjs
module.exports = {
// 一行最多多少個(gè)字符
printWidth: 150,
// 指定每個(gè)縮進(jìn)級別的空格數(shù)
tabWidth: 2,
// 使用制表符而不是空格縮進(jìn)行
useTabs: true,
// 在語句末尾打印分號
semi: true,
// 使用單引號而不是雙引號
singleQuote: true,
// 更改引用對象屬性的時(shí)間 可選值"<as-needed|consistent|preserve>"
quoteProps: 'as-needed',
// 在JSX中使用單引號而不是雙引號
jsxSingleQuote: false,
// 多行時(shí)盡可能打印尾隨逗號。（例如，單行數(shù)組永遠(yuǎn)不會(huì)出現(xiàn)逗號結(jié)尾。） 可選值"<none|es5|all>"，默認(rèn)none
trailingComma: 'es5',
// 在對象文字中的括號之間打印空格
bracketSpacing: true,
// jsx 標(biāo)簽的反尖括號需要換行
jsxBracketSameLine: false,
// 在單獨(dú)的箭頭函數(shù)參數(shù)周圍包括括號 always：(x) => x \ avoid：x => x
arrowParens: 'always',
// 這兩個(gè)選項(xiàng)可用于格式化以給定字符偏移量（分別包括和不包括）開始和結(jié)束的代碼
rangeStart: 0,
rangeEnd: Infinity,
// 指定要使用的解析器，不需要寫文件開頭的 @prettier
requirePragma: false,
// 不需要自動(dòng)在文件開頭插入 @prettier
insertPragma: false,
// 使用默認(rèn)的折行標(biāo)準(zhǔn) always\never\preserve
proseWrap: 'preserve',
// 指定HTML文件的全局空格敏感度 css\strict\ignore
htmlWhitespaceSensitivity: 'css',
// Vue文件腳本和樣式標(biāo)簽縮進(jìn)
vueIndentScriptAndStyle: false,
// 換行符使用 lf 結(jié)尾是 可選值"<auto|lf|crlf|cr>"
endOfLine: 'lf',
};
添加.prettierignore
/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*
安裝sass
yarn add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D
https://stylelint.io/
配置.stylelintrc.cjs
// @see https://stylelint.bootcss.com/
module.exports = {
extends: [
'stylelint-config-standard', // 配置stylelint拓展插件
'stylelint-config-html/vue', // 配置 vue 中 template 樣式格式化
'stylelint-config-standard-scss', // 配置stylelint scss插件
'stylelint-config-recommended-vue/scss', // 配置 vue 中 scss 樣式格式化
'stylelint-config-recess-order', // 配置stylelint css屬性書寫順序插件,
'stylelint-config-prettier', // 配置stylelint和prettier兼容
],
overrides: [
{
files: ['**/*.(scss|css|vue|html)'],
customSyntax: 'postcss-scss',
},
{
files: ['**/*.(html|vue)'],
customSyntax: 'postcss-html',
},
],
ignoreFiles: [
'**/*.js',
'**/*.jsx',
'**/*.tsx',
'**/*.ts',
'**/*.json',
'**/*.md',
'**/*.yaml',
],
/**
* null => 關(guān)閉該規(guī)則
* always => 必須
*/
rules: {
'value-keyword-case': null, // 在 css 中使用 v-bind，不報(bào)錯(cuò)
'no-descending-specificity': null, // 禁止在具有較高優(yōu)先級的選擇器后出現(xiàn)被其覆蓋的較低優(yōu)先級的選擇器
'function-url-quotes': 'always', // 要求或禁止 URL 的引號 "always(必須加上引號)"|"never(沒有引號)"
'no-empty-source': null, // 關(guān)閉禁止空源碼
'selector-class-pattern': null, // 關(guān)閉強(qiáng)制選擇器類名的格式
'property-no-unknown': null, // 禁止未知的屬性(true 為不允許)
// 'block-opening-brace-space-before': 'always', //大括號之前必須有一個(gè)空格或不能有空白符，方法標(biāo)記過時(shí)
'value-no-vendor-prefix': null, // 關(guān)閉 屬性值前綴 --webkit-box
'property-no-vendor-prefix': null, // 關(guān)閉 屬性前綴 -webkit-mask
'selector-pseudo-class-no-unknown': [
// 不允許未知的選擇器
true,
{
ignorePseudoClasses: ['global', 'v-deep', 'deep'], // 忽略屬性，修改element默認(rèn)樣式的時(shí)候能使用到
},
],
},
}
配置忽略文件.stylelintignore
/node_modules/*
/dist/*
/html/*
/public/*
package.json增加配置
"format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"",
"lint:eslint": "eslint src/**/*.{ts,vue} --cache --fix",
"lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix",
執(zhí)行yarn format會(huì)自動(dòng)格式化ts、js、html、json還有markdown代碼yarn lint:eslint會(huì)進(jìn)行錯(cuò)誤檢查yarn lint:style會(huì)進(jìn)行錯(cuò)誤檢查修改為正確的格式文章來源：http://www.zghlxwxcb.cn/news/detail-819370.html
如果使用vscode需要安裝如下插件
文章來源地址http://www.zghlxwxcb.cn/news/detail-819370.html
到了這里，關(guān)于vite vue3配置eslint和prettier以及sass的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
