前端 eslint+stylelint+prettier全流程配置

一.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",

二.创建以下5个文件放在项目顶层

.eslintignore；.eslintrc.cjs；.prettierignore；.prettierrc.cjs；.stylelintrc.cjs，具体文件内容如下

.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", // 禁止空函数

"no-eq-null": "error", // 禁止与 null 进行比较, 必须使用 !== 和 ===

"no-floating-decimal": "warn", // 禁止不必要的浮点小数

"no-implied-eval": "error", // 禁用隐式的eval()

"no-labels": "error", // 禁止标签语法

"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", // 强制在代码块中使用一致的大括号风格

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", // 强制在关键字前后使用一致的空格

"new-parens": "warn", // new对象需要有括号

"no-lonely-if": "error", // 禁止 if 作为唯一的语句出现在 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" }], // 数组声明使用Array 而不是 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,

{

// 禁止未知规则

ignoreAtRules: ["function", "if", "else", "else-if", "each", "include", "mixin", "use"]

}

],

"at-rule-empty-line-before": [

"always",

{

// 规则之前要求空行

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语句末尾加分号 弃用风险

"function-no-unknown": [true, { ignoreFunctions: ["map.get"] }], // 禁止未知函数

"import-notation": "string", // 使用string模式引入

"no-empty-source": null, // 允许空格

"no-descending-specificity": null,

"no-duplicate-selectors": true, // 禁止重复标签

"number-leading-zero": "always", // 禁止小数点前无0 弃用风险

"property-no-unknown": true, // 禁止出现未知属性

"rule-empty-line-before": "always", // 每个样式声明之间需要换行

"selector-pseudo-class-no-unknown": true, // 禁止未知伪类选择器

"selector-pseudo-element-no-unknown": true, // 禁止未知未知伪元素选择器

"selector-type-no-unknown": null, // 允许未知选择器（微信标签）

"string-quotes": "double", // 使用双引号 弃用风险

"unit-case": "lower", // 单位使用小写 弃用风险

"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", // 单一箭头函数不加括号

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标签默认缩进

}

.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 })],

四.最后

执行一次npx prettier . --write，格式化一次code，如果是使用的Vscode编辑器，格式化代码的时候选取prettier相关的格式方法

好文推荐

 您阅读本篇文章共花了： 

大家都在找：

前端：前端和后端的区别通俗理解