eslint+stylelint+prettier全流程配置

2023-10-27 23:52

本文主要是介绍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, // 不需要写文件开头的 @prettiersemi: 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相关的格式方法

这篇关于eslint+stylelint+prettier全流程配置的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/289285

相关文章

SQL Server配置管理器无法打开的四种解决方法

《SQLServer配置管理器无法打开的四种解决方法》本文总结了SQLServer配置管理器无法打开的四种解决方法,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录方法一:桌面图标进入方法二:运行窗口进入检查版本号对照表php方法三:查找文件路径方法四:检查 S

Spring Security中用户名和密码的验证完整流程

《SpringSecurity中用户名和密码的验证完整流程》本文给大家介绍SpringSecurity中用户名和密码的验证完整流程,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定... 首先创建了一个UsernamePasswordAuthenticationTChina编程oken对象,这是S

Linux中SSH服务配置的全面指南

《Linux中SSH服务配置的全面指南》作为网络安全工程师,SSH(SecureShell)服务的安全配置是我们日常工作中不可忽视的重要环节,本文将从基础配置到高级安全加固,全面解析SSH服务的各项参... 目录概述基础配置详解端口与监听设置主机密钥配置认证机制强化禁用密码认证禁止root直接登录实现双因素

嵌入式数据库SQLite 3配置使用讲解

《嵌入式数据库SQLite3配置使用讲解》本文强调嵌入式项目中SQLite3数据库的重要性,因其零配置、轻量级、跨平台及事务处理特性,可保障数据溯源与责任明确,详细讲解安装配置、基础语法及SQLit... 目录0、惨痛教训1、SQLite3环境配置(1)、下载安装SQLite库(2)、解压下载的文件(3)、

Linux如何快速检查服务器的硬件配置和性能指标

《Linux如何快速检查服务器的硬件配置和性能指标》在运维和开发工作中,我们经常需要快速检查Linux服务器的硬件配置和性能指标,本文将以CentOS为例,介绍如何通过命令行快速获取这些关键信息,... 目录引言一、查询CPU核心数编程(几C?)1. 使用 nproc(最简单)2. 使用 lscpu(详细信

Android ViewBinding使用流程

《AndroidViewBinding使用流程》AndroidViewBinding是Jetpack组件,替代findViewById,提供类型安全、空安全和编译时检查,代码简洁且性能优化,相比Da... 目录一、核心概念二、ViewBinding优点三、使用流程1. 启用 ViewBinding (模块级

Nginx 重写与重定向配置方法

《Nginx重写与重定向配置方法》Nginx重写与重定向区别:重写修改路径(客户端无感知),重定向跳转新URL(客户端感知),try_files检查文件/目录存在性,return301直接返回永久重... 目录一.try_files指令二.return指令三.rewrite指令区分重写与重定向重写: 请求

Nginx 配置跨域的实现及常见问题解决

《Nginx配置跨域的实现及常见问题解决》本文主要介绍了Nginx配置跨域的实现及常见问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来... 目录1. 跨域1.1 同源策略1.2 跨域资源共享(CORS)2. Nginx 配置跨域的场景2.1

gitlab安装及邮箱配置和常用使用方式

《gitlab安装及邮箱配置和常用使用方式》:本文主要介绍gitlab安装及邮箱配置和常用使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1.安装GitLab2.配置GitLab邮件服务3.GitLab的账号注册邮箱验证及其分组4.gitlab分支和标签的

MySQL MCP 服务器安装配置最佳实践

《MySQLMCP服务器安装配置最佳实践》本文介绍MySQLMCP服务器的安装配置方法,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下... 目录mysql MCP 服务器安装配置指南简介功能特点安装方法数据库配置使用MCP Inspector进行调试开发指