安裝依賴
npm install eslint babel-eslint eslint-plugin-vue husky lint-staged prettier @vue/eslint-config-prettier eslint-plugin-prettier stylelint stylelint-config-prettier stylelint-config-standard stylelint-order -D
其中包含了eslint、prettier、lint-staged氧吐、husky、stylelint蓄诽。eslint和prettier有部分語法是沖突的，可根據(jù)個(gè)人需要選擇安裝仑氛。如果覺得npm太慢也可使用cnpm安裝锯岖。
配置eslint
- 在項(xiàng)目根目錄新建.eslinttrc.js
module.exports = {
root: true,
env: {
browser: true,
node: true,
es6: true,
},
// 配置js全局變量出吹，因?yàn)槭莡ni-app鸠珠，全局的uni是不需要引入的渐排，還有5+的plus對(duì)象
globals: {
uni: 'readonly',
plus: 'readonly',
wx: 'readonly',
},
// 可根據(jù)個(gè)人喜好選擇飞盆，個(gè)人比較喜歡prettier配合vs code格式化html代碼，安利一波Ｆ毖！
extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
parserOptions: {
parser: 'babel-eslint',
},
rules: {
// 'prettier/prettier': 'error',
'no-console': [
'warn',
{
allow: ['warn', 'error'],
},
],
'no-eval': 'error',
'no-alert': 'error',
'vue/max-attributes-per-line': [
0,
{
singleline: 10,
multiline: {
max: 1,
allowFirstLine: false,
},
},
],
'vue/singleline-html-element-content-newline': 'off',
'vue/multiline-html-element-content-newline': 'off',
'vue/name-property-casing': ['error', 'PascalCase'],
'vue/no-v-html': 'off',
'accessor-pairs': 2,
'block-spacing': [2, 'always'],
'brace-style': [
2,
'1tbs',
{
allowSingleLine: true,
},
],
// 屬性駝峰命名
camelcase: [
0,
{
properties: 'always',
},
],
'comma-dangle': [2, 'only-multiline'],
'comma-style': [2, 'last'],
'constructor-super': 2,
curly: [2, 'multi-line'],
'dot-location': [2, 'property'],
'eol-last': 2,
eqeqeq: [
'warn',
'always',
{
null: 'ignore',
},
],
'generator-star-spacing': [
2,
{
before: true,
after: true,
},
],
'handle-callback-err': [2, '^(err|error)$'],
'jsx-quotes': [2, 'prefer-single'],
'new-cap': [
2,
{
newIsCap: true,
capIsNew: false,
},
],
'new-parens': 2,
'no-array-constructor': 2,
'no-caller': 2,
'no-class-assign': 2,
'no-cond-assign': 2,
'no-const-assign': 2,
'no-control-regex': 0,
'no-delete-var': 2,
'no-dupe-args': 2,
'no-dupe-class-members': 2,
'no-dupe-keys': 2,
'no-duplicate-case': 2,
'no-empty-character-class': 2,
'no-empty-pattern': 2,
'no-ex-assign': 2,
'no-extend-native': 2,
'no-extra-bind': 2,
'no-extra-boolean-cast': 2,
'no-extra-parens': [2, 'functions'],
'no-fallthrough': 2,
'no-floating-decimal': 2,
'no-func-assign': 2,
'no-implied-eval': 2,
'no-inner-declarations': [2, 'functions'],
'no-invalid-regexp': 2,
'no-irregular-whitespace': 2,
'no-iterator': 2,
'no-label-var': 2,
'no-labels': [
2,
{
allowLoop: false,
allowSwitch: false,
},
],
'no-lone-blocks': 2,
'no-mixed-spaces-and-tabs': 1,
'no-multi-spaces': 2,
'no-multi-str': 2,
'no-native-reassign': 2,
'no-negated-in-lhs': 2,
'no-new-object': 2,
'no-new-require': 2,
'no-new-symbol': 2,
'no-new-wrappers': 2,
'no-obj-calls': 2,
'no-octal': 2,
'no-octal-escape': 2,
'no-path-concat': 2,
'no-proto': 2,
'no-redeclare': 2,
'no-regex-spaces': 2,
'no-return-assign': [2, 'except-parens'],
'no-self-assign': 2,
'no-self-compare': 2,
'no-sequences': 2,
'no-shadow-restricted-names': 2,
'no-spaced-func': 2,
'no-sparse-arrays': 2,
'no-this-before-super': 2,
'no-throw-literal': 2,
'no-trailing-spaces': 0,
'no-undef': 2,
'no-undef-init': 2,
'no-unexpected-multiline': 2,
'no-unmodified-loop-condition': 2,
'no-unneeded-ternary': [
2,
{
defaultAssignment: false,
},
],
'no-unreachable': 2,
'no-unsafe-finally': 2,
'no-unused-vars': [
2,
{
vars: 'all',
args: 'none',
},
],
'no-useless-call': 2,
'no-useless-computed-key': 2,
'no-useless-constructor': 2,
'no-useless-escape': 0,
'no-whitespace-before-property': 2,
'no-with': 2,
'one-var': [
2,
{
initialized: 'never',
},
],
'operator-linebreak': [
2,
'after',
{
overrides: {
'?': 'before',
':': 'before',
},
},
],
'padded-blocks': [2, 'never'],
quotes: [
2,
'single',
{
avoidEscape: true,
allowTemplateLiterals: true,
},
],
'semi-spacing': [
2,
{
before: false,
after: true,
},
],
'space-in-parens': [2, 'never'],
'space-infix-ops': 1,
'space-unary-ops': [
0,
{
words: true,
nonwords: false,
},
],
'template-curly-spacing': [2, 'never'],
'use-isnan': 2,
'valid-typeof': 2,
'wrap-iife': [2, 'any'],
'yield-star-spacing': [2, 'both'],
yoda: [2, 'never'],
'prefer-const': 2,
'array-bracket-spacing': [2, 'never'],
'no-prototype-builtins': 0,
// 自定義開始
'vue/html-indent': 0,
'vue/html-closing-bracket-newline': 0,
'vue/html-self-closing': 0,
indent: 0,
// 句尾分號(hào)
semi: 0,
'comma-spacing': 0,
'space-before-blocks': 0,
'keyword-spacing': 0,
'key-spacing': 0,
'no-multiple-empty-lines': 0,
'spaced-comment': 0,
'space-before-function-paren': 0,
'arrow-spacing': 0,
'object-curly-spacing': 0,
},
}
配置prettier
在項(xiàng)目根目錄新建prettier.config.js, pretter主要用于提交代碼檢查時(shí)統(tǒng)一格式擎颖。
module.exports = {
// 行寬 default:80
printWidth: 100,
// tab 寬度 default:2
tabWidth: 4,
// 使用 tab 鍵 default:false
useTabs: false,
// 語句行末是否添加分號(hào) default:true
semi: false,
// 是否使用單引號(hào) default:false
singleQuote: true,
// 對(duì)象需要引號(hào)在加 default:"as-needed"
quoteProps: 'as-needed',
// jsx單引號(hào) default:false
jsxSingleQuote: true,
// 最后一個(gè)對(duì)象元素加逗號(hào) default:"es5"
trailingComma: 'es5',
// 在對(duì)象字面量聲明所使用的的花括號(hào)后（{）和前（}）輸出空格 default:true
bracketSpacing: true,
// 將 > 多行 JSX 元素放在最后一行的末尾，而不是單獨(dú)放在下一行（不適用于自閉元素）。default:false
jsxBracketSameLine: false,
// (x) => {} 是否要有小括號(hào) default:"always"
arrowParens: 'always',
// default:0
rangeStart: 0,
// default:Infinity
rangeEnd: Infinity,
// default:false
insertPragma: false,
// default:false
requirePragma: false,
// 不包裝 markdown text default:"preserve"
proseWrap: 'never',
// HTML空白敏感性 default:"css"
htmlWhitespaceSensitivity: 'strict',
// 在 *.vue 文件中 Script 和 Style 標(biāo)簽內(nèi)的代碼是否縮進(jìn) default:false
vueIndentScriptAndStyle: true,
// 末尾換行符 default:"lf"
endOfLine: 'auto',
// default:"auto"
embeddedLanguageFormatting: 'auto',
overrides: [
{
files: '*.md',
options: {
tabWidth: 2,
},
},
],
}
配置stylelint
在項(xiàng)目根目錄新建stylelint.config.js
module.exports = {
root: true,
plugins: ['stylelint-order'],
extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
rules: {
'selector-pseudo-class-no-unknown': [
true,
{
ignorePseudoClasses: ['global'],
},
],
'at-rule-no-unknown': [
true,
{
ignoreAtRules: ['function', 'if', 'each', 'include', 'mixin', 'for'],
},
],
'no-duplicate-selectors': null,
'no-empty-source': null,
'unicode-bom': 'never',
'no-descending-specificity': null,
'font-family-no-missing-generic-family-keyword': null,
'declaration-colon-space-after': 'always-single-line',
'declaration-colon-space-before': 'never',
'declaration-block-trailing-semicolon': 'always',
'rule-empty-line-before': [
'always',
{
ignore: ['after-comment', 'first-nested'],
},
],
'property-no-unknown': [
true,
{
ignoreProperties: ['lines'],
},
],
'media-feature-name-no-unknown': [
true,
{
ignoreMediaFeatureNames: 'min-device-pixel-ratio',
},
],
'unit-no-unknown': [
true,
{
ignoreUnits: ['rpx'],
},
],
'selector-pseudo-element-no-unknown': [
true,
{
ignorePseudoElements: ['v-deep'],
},
],
// 指定聲明塊內(nèi)屬性的字母順序
'order/properties-order': [
'position',
'top',
'right',
'bottom',
'left',
'z-index',
'display',
'float',
'width',
'height',
'max-width',
'max-height',
'min-width',
'min-height',
'padding',
'padding-top',
'padding-right',
'padding-bottom',
'padding-left',
'margin',
'margin-top',
'margin-right',
'margin-bottom',
'margin-left',
'margin-collapse',
'margin-top-collapse',
'margin-right-collapse',
'margin-bottom-collapse',
'margin-left-collapse',
'overflow',
'overflow-x',
'overflow-y',
'clip',
'clear',
'font',
'font-family',
'font-size',
'font-smoothing',
'osx-font-smoothing',
'font-style',
'font-weight',
'hyphens',
'src',
'line-height',
'letter-spacing',
'word-spacing',
'color',
'text-align',
'text-decoration',
'text-indent',
'text-overflow',
'text-rendering',
'text-size-adjust',
'text-shadow',
'text-transform',
'word-break',
'word-wrap',
'white-space',
'vertical-align',
'list-style',
'list-style-type',
'list-style-position',
'list-style-image',
'pointer-events',
'cursor',
'background',
'background-attachment',
'background-color',
'background-image',
'background-position',
'background-repeat',
'background-size',
'border',
'border-collapse',
'border-top',
'border-right',
'border-bottom',
'border-left',
'border-color',
'border-image',
'border-top-color',
'border-right-color',
'border-bottom-color',
'border-left-color',
'border-spacing',
'border-style',
'border-top-style',
'border-right-style',
'border-bottom-style',
'border-left-style',
'border-width',
'border-top-width',
'border-right-width',
'border-bottom-width',
'border-left-width',
'border-radius',
'border-top-right-radius',
'border-bottom-right-radius',
'border-bottom-left-radius',
'border-top-left-radius',
'border-radius-topright',
'border-radius-bottomright',
'border-radius-bottomleft',
'border-radius-topleft',
'content',
'quotes',
'outline',
'outline-offset',
'opacity',
'filter',
'visibility',
'size',
'zoom',
'transform',
'box-align',
'box-flex',
'box-orient',
'box-pack',
'box-shadow',
'box-sizing',
'table-layout',
'animation',
'animation-delay',
'animation-duration',
'animation-iteration-count',
'animation-name',
'animation-play-state',
'animation-timing-function',
'animation-fill-mode',
'transition',
'transition-delay',
'transition-duration',
'transition-property',
'transition-timing-function',
'background-clip',
'backface-visibility',
'resize',
'appearance',
'user-select',
'interpolation-mode',
'direction',
'marks',
'page',
'set-link-source',
'unicode-bidi',
'speak',
],
},
}
配置lint-staged
在項(xiàng)目根目錄新建lint-staged.config.js, 具體配置含義可自行g(shù)oogle
module.exports = {
'*.{js,jsx,ts,tsx,vue}': ['prettier --write', 'eslint --fix'],
'{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': ['prettier --write--parser json'],
'package.json': ['prettier --write'],
'*.vue': ['prettier --write', 'stylelint --fix'],
'*.{scss,less,styl,css,html}': ['stylelint --fix', 'prettier --write'],
'*.md': ['prettier --write'],
}
配置package.json
在配置中添加以下配置
"scripts": {
"lint:eslint": "eslint --fix --ext \"./**/*.{vue,less,css,scss}\"",
"lint:prettier": "prettier --write --loglevel warn \"./**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
"lint:stylelint": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
"lint-staged": "lint-staged",
"lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ",
}
// husky的其他配置可自行添加子库，這里只配置了git提交運(yùn)行l(wèi)int-staged
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
如不需要在git提交時(shí)自動(dòng)修復(fù)代碼可將husky配置中的lint-staged改為lint-staged:js,
配置代碼檢測(cè)忽略目錄
.eslintignore
可自行根據(jù)需要添加
unpackage
node_modules
uview-ui
.prettierignore
# 忽略打包的文件
unpackage
# 忽略u(píng)ni-app官方的組件庫(kù)錯(cuò)誤和警告仑嗅，官方的竟然通不過...
uni-**
uview-ui
.gitignore
.DS_Store
node_modules/
unpackage/
dist/
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.project
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
配置完成
- 運(yùn)行npm run lint-staged沒問題的話就歐克了
最后附上個(gè)人vs code Eslint插件及Vetur配置
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
"eslint.codeAction.showDocumentation": {
"enable": true
},
"eslint.format.enable": true,
"eslint.probe": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html",
"vue",
"markdown",
"css"
],
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"vetur.format.defaultFormatter.js": "none",
"vetur.format.options.tabSize": 4,
"[vue]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"editor.tabSize": 4,
"auto-close-tag.excludedTags": [
"area",
"base",
"br",
"col",
"command",
"embed",
"hr",
"img",
"input",
"keygen",
"link",
"meta",
"param",
"source",
"track",
"wbr"
],
"editor.fontSize": 14,
"editor.lineHeight": 22,
"eslint.debug": true,
"eslint.lintTask.enable": true,
"eslint.alwaysShowStatus": true,
"editor.detectIndentation": false,
"diffEditor.ignoreTrimWhitespace": false,
"terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
"files.associations": {
"*.json": "jsonc"
},
參考：https://blog.csdn.net/a1647800606/article/details/106344616/俗他、https://codechina.csdn.net/mirrors/PanJiaChen/vue-admin-template/-/tree/master
