eslint+stylelint+prettier全流程配置

这篇具有很好参考价值的文章主要介绍了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> 而不是 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相关的格式方法文章来源地址https://www.toymoban.com/news/detail-766088.html

到了这里,关于eslint+stylelint+prettier全流程配置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vite 创建vue3项目,使用 Prettier 统一格式化代码,集成 ESLint、Stylelint 代码校验规范

    在团队开发中,保持代码风格的一致性和代码质量的高度,对于项目的可维护性和可读性非常重要。为了实现这一目标,我们可以使用工具来自动格式化代码并进行代码校验,在开发过程中捕获潜在的问题,并提供修复建议。 本示例中,我们将使用 Vite 来创建一个新的 Vue

    2024年04月28日
    浏览(60)
  • 【vue3-element-admin】ESLint+Prettier+Stylelint+EditorConfig 约束和统一前端代码

    本文介绍 vue3-element-admin 如何通过ESLint 检测 JS/TS 代码、Prettier 格式化代码、Stylelint 检测 CSS/SCSS 代码和配置 EditorConfig 来全方位约束和统一前端代码规范。 ESLint 可组装的JavaScript和JSX检查工具,目标是保证代码的一致性和避免错误。 ESLint 安装 安装 ESLint 插件 VSCode 插件市场

    2024年02月13日
    浏览(94)
  • 【vue3-element-admin】ESLint+Prettier+Stylelint+EditorConfig 约束和统一前端代码规范

    本文介绍 vue3-element-admin 如何通过ESLint 检测 JS/TS 代码、Prettier 格式化代码、Stylelint 检测 CSS/SCSS 代码和配置 EditorConfig 来全方位约束和统一前端代码规范。 ESLint 可组装的JavaScript和JSX检查工具,目标是保证代码的一致性和避免错误。 安装 ESLint 插件 VSCode 插件市场搜索 ESLint 插

    2023年04月17日
    浏览(84)
  • 基于Vue3+Vite+TS+ESLint+Prettier+Husky+lint-staged+commitlint+stylelint的项目构建

    博客后台管理系统使用后的是基于Vue3+Vite+TS+ESLint+Prettier的开发,具体项目构建如下 ESLint: 控制代码质量 Prettier: 控制代码风格 2.1、安装ESLint、Prettier相关相关包 eslint: ESLint的核心代码库 prettier: Prettier的格式化代码的核心代码库 eslint-config-airbnb-base: airbnb的代码规范(依赖pl

    2024年02月07日
    浏览(57)
  • 前端工程化 | vue3+ts+jsx+sass+eslint+prettier 配置化全流程

    前端开发是一个工程化的流程。 包括持续集成、持续部署。 我认为集成 的第一方面就是开发,在前端项目开发中,需要保证代码格式规范的统一、代码质量、提交的规划。而这些要求需要通过各种插件来保证规范化和流程化开发。 如何配置这些插件,这些插件各自的功能是

    2024年02月12日
    浏览(40)
  • eslint prettier 配置

    1.创建: pnpm create vite 2. 自启浏览器;技巧01 : package.json - \\\"dev\\\": \\\"vite\\\" -- \\\"dev\\\": \\\"vite\\\" -- \\\"dev\\\": \\\"vite --open \\\" 一个项目要有统一的规范,需要使用 eslint + stylelint + prettier 来对我们的代码质量做检测和修复 eslint用于代码语法检测 stylelint用于对css代码进行语法检测 prettier用于代码格式规范

    2024年03月22日
    浏览(46)
  • 在IDEA中配置eslint和prettier

    一开始用的是ESlint8以上的版本,后来一直报莫名其妙的错,就回退到7.5.0的版本。  .eslintrc.js(主要用来在rules中自定义规则)   prettierrc.js (自动修复代码中的规范)   .eslintignore (规则忽略的文件夹)  .editorconfig(这个文件夹会去查看.md文件夹中的规范,可配置可不配)

    2024年02月06日
    浏览(36)
  • vscode中使用eslint+prettier的配置

    eslint+prettier+vscode自动保存用起来感觉非常爽快。 一般来说,安装eslint+prettier插件,然后使用相关脚手架配套的eslint+prettier,无法自动格式代码,每次都需要执行格式化命令。这里贴出保存自动格式化代码的setting.json。 如果不使用脚手架自带的eslint+prettier配置,可以参考我之

    2024年02月10日
    浏览(47)
  • vue项目中配置eslint和prettier

    eslint检查语法错误,格式问题并不重要 prettier是格式化工具,保证代码美观 vscode插件Eslint(务必安装),错误标红,保存的时候自动修正eslint错误 如果项目中一开始就没有配置,用下面的方法从零配置 若项目中已经有别人配好的,可根据需要修改规则 eslint插件,初始化,生

    2024年02月07日
    浏览(73)
  • Vue typescript项目配置eslint+prettier

    前言 本文基于 “vite”: “^5.0.0” 1.安装依赖 安装 eslint 安装 eslint-plugin-vue 主要用于检查 Vue 文件语法 安装 prettier 及相关插件 安装 typescript 解析器、规则补充 2.根目录创建 .eslintrc.cjs 3.根目录创建 .prettierrc.cjs 4.配置 package.json 的 scripts 字段 5.测试配置 如果本篇文章对你有帮

    2024年01月16日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包