【vue3-element-admin】ESLint+Prettier+Stylelint+EditorConfig 约束和统一前端代码

news2024/10/6 22:22:50

前言

本文介绍 vue3-element-admin 如何通过ESLint 检测 JS/TS 代码、Prettier 格式化代码、Stylelint 检测 CSS/SCSS 代码和配置 EditorConfig 来全方位约束和统一前端代码规范。

ESLint 代码检测

ESLint 可组装的JavaScript和JSX检查工具，目标是保证代码的一致性和避免错误。

ESLint 安装

安装 ESLint 插件

VSCode 插件市场搜索 ESLint 插件并安装

安装 ESLint 依赖

npm i -D eslint

ESLint 配置

ESLint 配置(.eslintrc.cjs)

执行命令完成 ESLint 配置初始化

npx eslint --init

根目录自动生成的 .eslintrc.cjs 配置内容如下：

module.exports = {
  env: {
    es2021: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:@typescript-eslint/recommended",
  ],
  overrides: [],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["vue", "@typescript-eslint"],
  rules: {},
};

ESLint 解析器配置

在默认配置基础上需要修改解析器为 vue-eslint-parser ，不然在检测执行中出现 error Parsing error: '>' expected 的解析错误，修改 .eslintrc.cjs 如下：

ESLint 忽略配置(.eslintignore)

根目录新建 .eslintignore 文件，添加忽略文件， ESLint 校验会忽略这些文件，配置如下：

dist
node_modules
public
.husky
.vscode
.idea
*.sh
*.md

src/assets

.eslintrc.cjs
.prettierrc.cjs
.stylelintrc.cjs

ESLint 检测指令

package.json 添加 eslint 检测指令：

  "scripts": {
    "lint:eslint": "eslint \"src/**/*.{vue,ts,js}\" --fix"
  }

ESLint 检测

ESLint 检测 & 验证

执行命令进行ESLint检测：

npm run lint:eslint

ESLint 保存自动检测

打开 File → Preferences → Settings 搜索 Editor: Code Actions On Save 选择 Workspace标签设置工作区，点击 Edit in settings.json

image-20230408160539870

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // 开启eslint自动检测
  }
}

Prettier 代码格式化

Prettier 一个“有态度”的代码格式化工具。

Prettier 安装

安装 Prettier 插件

VSCode 插件市场搜索 Prettier - Code formatter 插件安装

安装 Prettier 依赖

npm install -D prettier

Prettier 配置

Prettier 配置 (.prettierrc.cjs)

根目录创建.prettierrc.cjs 文件，复制 官方默认配置 （详细配置：Prettier 中文网 - Options）

module.exports = {
  // (x)=>{},单个参数箭头函数是否显示小括号。(always:始终显示;avoid:省略括号。默认:always)
  arrowParens: "always",
  // 开始标签的右尖括号是否跟随在最后一行属性末尾，默认false
  bracketSameLine: false,
  // 对象字面量的括号之间打印空格 (true - Example: { foo: bar } ; false - Example: {foo:bar})
  bracketSpacing: true,
  // 是否格式化一些文件中被嵌入的代码片段的风格(auto|off;默认auto)
  embeddedLanguageFormatting: "auto",
  // 指定 HTML 文件的空格敏感度 (css|strict|ignore;默认css)
  htmlWhitespaceSensitivity: "css",
  // 当文件已经被 Prettier 格式化之后，是否会在文件顶部插入一个特殊的 @format 标记，默认false
  insertPragma: false,
  // 在 JSX 中使用单引号替代双引号，默认false
  jsxSingleQuote: false,
  // 每行最多字符数量，超出换行(默认80)
  printWidth: 120,
  // 超出打印宽度 (always | never | preserve )
  proseWrap: "preserve",
  // 对象属性是否使用引号(as-needed | consistent | preserve;默认as-needed:对象的属性需要加引号才添加;)
  quoteProps: "as-needed",
  // 是否只格式化在文件顶部包含特定注释(@prettier| @format)的文件，默认false
  requirePragma: false,
  // 结尾添加分号
  semi: true,
  // 使用单引号 (true:单引号;false:双引号)
  singleQuote: false,
  // 缩进空格数，默认2个空格
  tabWidth: 2,
  // 元素末尾是否加逗号，默认es5: ES5中的 objects, arrays 等会添加逗号，TypeScript 中的 type 后不加逗号
  trailingComma: "es5",
  // 指定缩进方式，空格或tab，默认false，即使用空格
  useTabs: false,
  // vue 文件中是否缩进 <style> 和 <script> 标签，默认 false
  vueIndentScriptAndStyle: false,
};

格式化忽略配置( .prettierignore)

根目录新建 .prettierignore 文件，添加忽略配置如下：

dist
node_modules
public
.husky
.vscode
.idea
*.sh
*.md

src/assets

prettier 格式化指令

package.json 添加 prettier 格式化指令：

  "scripts": {
    "lint:prettier": "prettier --write \"**/*.{js,ts,json,css,less,scss,vue,html,md}\""
  }

Prettier 格式化

Prettier 格式化 & 验证

执行命令进行 Prettier 代码格式化：

npm run lint:prettier

Prettier 保存自动格式化

VSCode 的 settings.json 配置:

{
  "editor.formatOnSave": true, // 保存格式化文件
  "editor.defaultFormatter": "esbenp.prettier-vscode" // 指定 prettier 为所有文件默认格式化器
}

验证保存自动格式化

Stylelint CSS 检测

Stylelint 一个强大的 CSS linter(检查器)，可帮助您避免错误并强制执行约定。官方网站： https://stylelint.io

注意官网明确指出 Stylelint 作为 CSS 代码规范检测而不作为代码格式化工具使用（Prettier 是更好的选择），新版本(15.0.0)为此废弃相关的 rules

Stylelint 安装

安装 Stylelint 插件

VSCode 插件搜索 Stylelint 并安装

安装 Stylelint 依赖

pnpm install -D stylelint stylelint-config-standard stylelint-config-recommended-scss stylelint-config-recommended-vue postcss postcss-html postcss-scss stylelint-config-recess-order stylelint-config-html
依赖说明备注
stylelintstylelint 核心库stylelint
stylelint-config-standardStylelint 标准共享配置stylelint-config-standard 文档
stylelint-config-recommended-scss扩展 stylelint-config-recommended 共享配置并为 SCSS 配置其规则stylelint-config-recommended-scss 文档
stylelint-config-recommended-vue扩展 stylelint-config-recommended 共享配置并为 Vue 配置其规则stylelint-config-recommended-vue 文档
stylelint-config-recess-order提供优化样式顺序的配置CSS 书写顺序规范
stylelint-config-html共享 HTML (类似 HTML) 配置，捆绑 postcss-html 并对其进行配置stylelint-config-html 文档
postcss-html解析 HTML (类似 HTML) 的 PostCSS 语法postcss-html 文档
postcss-scssPostCSS 的 SCSS 解析器postcss-scss 文档，支持 CSS 行类注释

Stylelint 配置

Stylelint 配置(.stylelintrc.cjs)

根目录新建 .stylelintrc.cjs 文件，配置如下：

module.exports = {
  // 继承推荐规范配置
  extends: [
    "stylelint-config-standard",
    "stylelint-config-recommended-scss",
    "stylelint-config-recommended-vue/scss",
    "stylelint-config-html/vue",
    "stylelint-config-recess-order",
  ],
  // 指定不同文件对应的解析器
  overrides: [
    {
      files: ["**/*.{vue,html}"],
      customSyntax: "postcss-html",
    },
    {
      files: ["**/*.{css,scss}"],
      customSyntax: "postcss-scss",
    },
  ],
  // 自定义规则
  rules: {
    // 允许 global 、export 、v-deep等伪类
    "selector-pseudo-class-no-unknown": [
      true,
      {
        ignorePseudoClasses: ["global", "export","v-deep", "deep"],
      },
    ],
  },
};

Stylelint 忽略配置(.stylelintignore)

根目录创建 .stylelintignore 文件，配置忽略文件如下：

dist
node_modules
public
.husky
.vscode
.idea
*.sh
*.md

src/assets

Stylelint 检测指令

package.json 添加 Stylelint 检测指令：

  "scripts": {
      "lint:stylelint": "stylelint  \"**/*.{css,scss,vue,html}\" --fix"
  }

Stylelint 检测

Stylelint 检测 & 验证

执行以下命令完成

npm run lint:stylelint

验证

StyleLint 保存自动检测

VSCode 的 settings.json 配置内容如下:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true // 开启 Stylelint 保存自动检测
  },
  // Stylelint 校验文件
  "stylelint.validate": ["css", "scss", "vue", "html"]
}

为了验证把尺寸属性 width 放置在定位属性 position 前面，根据 CSS 书写顺序规范 推断是不符合规范的，在保存时 Stylelint 自动将属性重新排序，达到预期。

EditorConfig 编辑器配置

EditorConfig 主要用于统一不同 IDE 编辑器的编码风格。官方网站: EditorConfig

安装 EditorConfig 插件

VSCode 搜索 EditorConfig for VS Code 插件并安装

配置 EditorConfig

根目录创建 .editorconfig 文件，添加配置如下：

# http://editorconfig.org
root = true

# 表示所有文件适用
[*]
charset = utf-8 # 设置文件字符集为 utf-8
end_of_line = lf # 控制换行类型(lf | cr | crlf)
indent_style = tab # 缩进风格（tab | space）
insert_final_newline = true # 始终在文件末尾插入一个新行

# 表示仅 md 文件适用以下规则
[*.md]
max_line_length = off # 关闭最大行长度限制
trim_trailing_whitespace = false # 关闭末尾空格修剪

项目源码

GiteeGithub
仓库地址vue3-element-adminvue3-element-admin

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

CXL 预备知识：MESI 协议介绍

CXL 预备知识：MESI 协议介绍

&#x1f525;点击查看精选 CXL 系列文章&#x1f525; &#x1f525;点击进入【芯片设计验证】社区&#xff0c;查看更多精彩内容&#x1f525; &#x1f4e2; 声明&#xff1a; &#x1f96d; 作者主页&#xff1a;【MangoPapa的CSDN主页】。⚠️ 本文首发于CSDN&#xff0c…
阅读更多...
Redis—持久化

Redis—持久化

这里写目录标题 AOF三种写回策略写回策略的优缺点AOF 重写机制AOF后台重写AOF优缺点使用命令 RDBRDB 持久化的工作原理执行快照时&#xff0c;数据能被修改吗RDB 持久化的优点RDB 持久化的缺点 混合持久化大key对持久化的影响 AOF 保存写操作命令到日志的持久化方式&#xff0…
阅读更多...
Codeforces-Round-891-Div-3

Codeforces-Round-891-Div-3

Codeforces Round 891 (Div. 3) A. Array Coloring 题目 给你一个由 n n n个整数组成的数组。您的任务是确定是否可以将其所有元素着色为两种颜色&#xff0c;使得两种颜色的元素之和具有相同的奇偶性&#xff0c;并且每种颜色至少有一个元素着色。 例如&#xff0c;如果数…
阅读更多...
ArcGIS Pro应用—暨基础入门、制图、空间分析、影像分析、三维建模、空间统计分析与建模、python融合、案例应用全流程科研能力提升教程

ArcGIS Pro应用—暨基础入门、制图、空间分析、影像分析、三维建模、空间统计分析与建模、python融合、案例应用全流程科研能力提升教程

详情点击链接&#xff1a;ArcGIS Pro应用—暨基础入门、制图、空间分析、影像分析、三维建模、空间统计分析与建模、python融合、案例应用全流程科研能力提升教程 第一&#xff1a;GIS及ArcGIS Pro 1.GIS基本原理及常用软件 2.ArcGIS Pro 安装与配置 3.ArcGIS Pro 3.0 的新…
阅读更多...
Detecting Everything in the Open World: Towards Universal Object Detection

Detecting Everything in the Open World: Towards Universal Object Detection

1. 论文简介 论文题目《Detecting Everything in the Open World: Towards Universal Object Detection》发表情况&#xff0c;CVPR2023[论文地址][https://arxiv.org/pdf/2303.11749.pdf][代码地址][https://github.com/zhenyuw16/UniDetector] 2.背景与摘要 本文旨在解决通…
阅读更多...
面试热题（岛屿数量）

面试热题（岛屿数量）

给你一个由 1&#xff08;陆地&#xff09;和 0&#xff08;水&#xff09;组成的的二维网格&#xff0c;请你计算网格中岛屿的数量。 岛屿总是被水包围&#xff0c;并且每座岛屿只能由水平方向和/或竖直方向上相邻的陆地连接形成。 此外&#xff0c;你可以假设该网格的四条边均…
阅读更多...
关于三次握手和四次挥手，面试官到底想听到怎样的回答？

关于三次握手和四次挥手，面试官到底想听到怎样的回答？

我一看到 TCP&#xff0c;啪就点进来了&#xff0c;很快啊。 TCP报文 一个完整的 TCP 报文头部共有 20 个字节&#xff0c;其中包括&#xff1a; 源端口号&#xff08;16位&#xff09;和目的端口号&#xff08;16位&#xff09;&#xff1a;再加上 ip 首部的源 ip 地址和目…
阅读更多...
canvas实现代码雨

canvas实现代码雨

学习抖音&#xff1a; 渡一前端必修课 效果图&#xff1a; 全部代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge">&…
阅读更多...
实现 Notification 通知

实现 Notification 通知

如图这种效果 可以使用 Notification API来进行实现 代码如下 注意&#xff1a;一定要用服务端打开。不然不会弹出来。vscode可以安装 live Serve 插件服务端打开 <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8">…
阅读更多...
git-指令

git-指令

1.名称和邮箱 git config --global user.name test git config --global user.email testatguigu.com 这里的--global表示全局配置&#xff0c;后续的所有文件操作都会使用该用户名称及邮箱。此时在操作系统的用户目录C:\Users\Administrator&#xff0c;会产生新的配置文件.gi…
阅读更多...
【Python】基础：标准库常用模块

【Python】基础：标准库常用模块

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍标准库常用模块。 学其所用&#xff0c;用其所学。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c;下次更新不迷路&#…
阅读更多...
什么是Milvus

什么是Milvus

原文出处&#xff1a;https://www.yii666.com/blog/393941.html 什么是Milvus Milvus 是一款云原生向量数据库&#xff0c;它具备高可用、高性能、易拓展的特点&#xff0c;用于海量向量数据的实时召回。 Milvus 基于 FAISS、Annoy、HNSW 等向量搜索库构建&#xff0c;核心是…
阅读更多...
开发工具Eclipse的使用

开发工具Eclipse的使用

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于Eclipse使用的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一.Eclipse是什么 二.使用Eclipse的…
阅读更多...
OLED透明屏选购指南：性能、品牌与预算的平衡

OLED透明屏选购指南：性能、品牌与预算的平衡

引言&#xff1a;OLED透明屏作为一种创新的显示技术&#xff0c;正在迅速发展并广泛应用于各个领域。 然而&#xff0c;面对市场上琳琅满目的OLED透明屏产品&#xff0c;如何选择适合自己需求的高品质产品成为了采购者们的重要任务。 对此&#xff0c;尼伽将为您提供一份OLED…
阅读更多...
webshell链接工具-Behinder(冰蝎)

webshell链接工具-Behinder(冰蝎)

“冰蝎”动态二进制加密网站管理客户端 项目地址&#xff1a; https://github.com/rebeyond/Behinder
阅读更多...
大模型“瘦身”进手机 下一个iPhone时刻将至？

大模型“瘦身”进手机 下一个iPhone时刻将至？

一股“端侧大模型”浪潮正在涌来。华为、高通等芯片巨头正探索将AI大模型植入端侧&#xff0c;让手机实现新一代物种进化。 相比ChatGPT、Midjourney等AI应用依赖云端服务器提供服务&#xff0c;端侧大模型主打在本地实现智能化。它的优势在于能够更好地保护隐私&#xff0c;同…
阅读更多...
以太网UDP协议（十一）

以太网UDP协议（十一）

目录 一、端口号 二、UDP 一、端口号 端口号&#xff0c;用来识别同一台计算机中进行通信的不同应用程序&#xff0c;也别成为程序地址。 备注&#xff1a;端口号由其使用的传输层协议决定。因此&#xff0c;不同的传输协议可以使用相同的端口号。即TCP和UDP可以同时使用相同…
阅读更多...
php实现登录的例子

php实现登录的例子

界面&#xff1a; 登录界面login.html代码&#xff1a; <!DOCUMENT html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"http://www.w3.org/1999/xhtml"…
阅读更多...
css的transform样式计算-第一节

css的transform样式计算-第一节

本文作者为 360 奇舞团前端开发工程师 引言 在使用 css 样式进行样式的缩放、旋转等设置时&#xff0c;思考了一下它的较浅层的原理&#xff0c;恩&#xff0c;这个阶段都 是一些初高的数学计算&#xff0c;从新看这里的时候顺便捡了捡初高中的数学&#xff0c;比如三角函数之类…
阅读更多...
重生之我要学C++第七天(匿名对象、内部类)

重生之我要学C++第七天(匿名对象、内部类)

构造函数的隐式类型转化 1.单参数构造函数隐式类型转换 来看下面的代码 #include<iostream> using namespace std; class A { public:A(int x){_a x;} private:int _a; }; int main() {A a 3;return 0; } 此处这句代码 A a 3; 对于这里&#xff0c;编译完全正确&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023