[vue3-element-admin] ESLint+Prettier+Stylelint+EditorConfig constraints and unified front-end code specification

foreword

This article introduces how vue3-element-admin uses ESLint to detect JS/TS code, Prettier formatted code, Stylelint to detect CSS/SCSS code and configure EditorConfig to comprehensively constrain and unify the front-end code specification.

ESLint code inspection

ESLint is a composable JavaScript and JSX inspection tool with the goal of ensuring code consistency and avoiding errors.

ESLint installation

Install the ESLint plugin

VSCode plug-in market search ESLint plug-in and install

Install ESLint dependencies

npm i -D eslint

ESLint configuration

ESLint configuration (.eslintrc.cjs)

Execute the command to complete ESLint configuration initialization

npx eslint --init

The configuration content automatically generated by the root directory .eslintrc.cjsis as follows:

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 parser configuration

On the basis of the default configuration, the parser needs to be modified , otherwise , the parsing error that vue-eslint-parseroccurs during detection execution can be modified as follows:error Parsing error: '>' expected.eslintrc.cjs

ESLint ignores configuration (.eslintignore)

Create a new .eslintignorefile in the root directory, add ignored files, ESLint verification will ignore these files, the configuration is as follows:

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

src/assets

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

ESLint detection instructions

package.json add eslint detection instructions:

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

ESLint detection

ESLint detection & validation

Execute the command to ESLintdetect:

npm run lint:eslint

ESLint save auto-detection

Open File → Preferences → Settings to search, Editor: Code Actions On Saveselect Workspacethe label to set the workspace, and clickEdit in settings.json

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

Prettier code formatting

Prettier is an "attitude" code formatting tool.

Prettier installation

Install the Prettier plugin

VSCode plug-in market search Prettier - Code formatterPlug-in installation

Install Prettier dependencies

npm install -D prettier

Prettier configuration

Prettier deployment (.prettierrc.cjs)

Create .prettierrc.cjsa file in the root directory and copy the official default configuration (detailed configuration: Prettier Chinese Network - 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,
};

Format ignore configuration ( .prettierignore )

Create a new .prettierignore file in the root directory, and add the ignore configuration as follows:

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

src/assets

prettier formatting instructions

package.json add prettier formatting instructions:

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

Prettier formatting

Prettier Formatting & Validation

Execute the command to format the Prettier code:

npm run lint:prettier

Prettier Save Auto Format

VSCode settings.jsonconfiguration:

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

Verify Save Auto Format

Stylelint CSS detection

Stylelint A powerful CSS linter (checker) that helps you avoid mistakes and enforce conventions. Official website: https://stylelint.io

Note that the official website clearly states that Stylelint is used as CSS code specification detection rather than as a code formatting tool (Prettier is a better choice), and the new version (15.0.0) discards related rules for this purpose

Stylelint installation

Install the Stylelint plugin

VSCode plugin search Stylelintand install

Install Stylelint dependencies

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

rely	illustrate	Remark
stylelint	stylelint core library	stylelint
stylelint-config-standard	Stylelint standard shared configuration	stylelint-config-standard documentation
stylelint-config-recommended-scss	Extends the stylelint-config-recommended shared configuration and configures its rules for SCSS	stylelint-config-recommended-scss documentation
stylelint-config-recommended-vue	Extends the stylelint-config-recommended shared config and configures its rules for Vue	stylelint-config-recommended-vue documentation
stylelint-config-recess-order	Provides configuration to optimize the order of styles	CSS writing order specification
stylelint-config-html	Shared HTML (HTML-like) configuration, bundles postcss-html and configures it	stylelint-config-html documentation
postcss-html	PostCSS syntax for parsing HTML (HTML-like)	postcss-html documentation
postcss-scss	SCSS parser for PostCSS	postcss-scss documentation , supports CSS line class comments

Stylelint configuration

Stylelint configuration (.stylelintrc.cjs)

Create a new .stylelintrc.cjsfile in the root directory, the configuration is as follows:

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 ignores configuration (.stylelintignore)

Create a .stylelintignore file in the root directory, and configure the ignore file as follows:

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

src/assets

Stylelint detection directives

package.json add Stylelint detection directive:

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

Stylelint detection

Stylelint detection & validation

Execute the following command to complete

npm run lint:stylelint

verify

StyleLint saves auto-detection

settings.jsonThe configuration of VSCode is as follows:

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

In order to verify that the size attribute width is placed before the positioning attribute position, according to the CSS writing order specification , it is inferred that it does not conform to the specification. Stylelint automatically reorders the attributes when saving, meeting expectations.

EditorConfig editor configuration

EditorConfig is mainly used to unify the coding styles of different IDE editors. Official website: https://editorconfig.org/

Install the EditorConfig plugin

VSCode searches for EditorConfig for VS Codeplugins and installs them

Configure Editor Config

Create a .editorconfig file in the root directory, and add the configuration as follows:

# 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 # 关闭末尾空格修剪

Project source code

The source code address of the complete project is as follows. If you have any related questions, you can add a communication group through the project about us .

	Gitee	Github
Warehouse Address	vue3-element-admin	vue3-element-admin