Building a Vue3 component library from 0 (11): Programming specification toolchain for integrated projects (ESlint+Prettier+Stylelint)

If you want to do good things first, you must first sharpen your tools. A good project must have a unified specification, such as code specification, style specification, and code submission specification. The unified code specification aims to enhance team development collaboration, improve code quality, and create a cornerstone of development, so everyone must strictly abide by it.
This article will introduce ESLint+Prettier+Stylelint to standardize the code.

ESlint

ESLintIt is ECMAScript/JavaScripta tool for identifying and reporting pattern matching in code. Its goal is to ensure code consistency and avoid errors. Let's take a look at how to use it in our project. First install
ESLint

pnpm add eslint -D -w

Initialize ESLint

pnpm create @eslint/config

At this time, some options will appear for us to choose, as follows insert image description here
Because we are using pnpm, we chose No when choosing to install those plug-ins, here we use pnpm to install them manually

pnpm i eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest -D -w

At this point, we will find that the ESlint configuration file .eslintrc.cjs appears in the root directory. We have made some configuration changes to this file as follows

module.exports = {
    
    
  env: {
    
    
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended'
  ],
  globals: {
    
    
    defineOptions: true
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    
    
    ecmaVersion: 'latest',
    sourceType: 'module',
    parser: '@typescript-eslint/parser'
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    
    
    '@typescript-eslint/ban-ts-comment': 'off',
    'vue/multi-word-component-names': 'off'
  }
};

At the same time, we create a new .eslintignore to ignore the verification of some files

**.d.ts
/packages/easyest
dist
node_modules

Then we add the command lint:script in the script of package.json

  "scripts": {
    
    
    "lint:script": "eslint --ext .js,.jsx,.vue,.ts,.tsx --fix --quiet ./"
  },

Then pnpm run lint:scriptyou can see some irregularities when you execute it. Now some friends will definitely ask why it is automatically formatted when it cannot be saved. Don’t worry, how to save the automatic format will be mentioned below.

Integrate Prettier

In fact, only ESlint is not enough. ESLint is often used in combination with Prettier to reflect their capabilities. Prettier mainly formats code. Next, let's see how to combine the two

same first installPrettier

pnpm add prettier -D -w

create a new file.prettierrc.cjs

module.exports = {
    
    
  printWidth: 80, //一行的字符数，如果超过会进行换行，默认为80
  tabWidth: 2, // 一个 tab 代表几个空格数，默认为 2 个
  useTabs: false, //是否使用 tab 进行缩进，默认为false，表示用空格进行缩减
  singleQuote: true, // 字符串是否使用单引号，默认为 false，使用双引号
  semi: true, // 行尾是否使用分号，默认为true
  trailingComma: 'none', // 是否使用尾逗号
  bracketSpacing: true // 对象大括号直接是否有空格，默认为 true，效果：{ a: 1 }
};

Install eslint-config-prettier (override the rules of eslint itself) and eslint-plugin-prettier (Prettier to take over eslint --fix is the ability to fix the code)

pnpm add eslint-config-prettier eslint-plugin-prettier -D -w

Configure .eslintrc.cjs, and add comments to the newly added part (note that VSCode formatted documents will be prettier by default after configuration)

module.exports = {
    
    
  env: {
    
    
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
    // 1. 接入 prettier 的规则
    'prettier',
    'plugin:prettier/recommended'
  ],
  globals: {
    
    
    defineOptions: true
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    
    
    ecmaVersion: 'latest',
    sourceType: 'module',
    parser: '@typescript-eslint/parser'
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    
    
    // 2. 开启 prettier 自动修复的功能
    'prettier/prettier': 'error',
    '@typescript-eslint/ban-ts-comment': 'off',
    'vue/multi-word-component-names': 'off'
  }
};

Finally, execute pnpm run lint:scriptto complete the ESLint rule verification check and Prettier's automatic
repair. We usually hope that the editor can automatically format and repair us when saving the code. VSCode can do it. It only needs a simple configuration. In the settings, search for the configuration as shown in the figure below
insert image description here
. After setting, press ctrl+s to automatically format the code.

At this point, ESlint+Prettier has been configured, and then Stylelint (style specification tool) will be introduced to the project

Stylelint

First install some plugin chains

pnpm add stylelint stylelint-prettier stylelint-config-standard stylelint-config-recommended-less postcss-html stylelint-config-recommended-vue stylelint-config-recess-order stylelint-config-prettier -D -w

Then create a new .stylelintrc.cjs

module.exports = {
    
    
  // 注册 stylelint 的 prettier 插件
  plugins: ['stylelint-prettier'],
  // 继承一系列规则集合
  extends: [
    // standard 规则集合
    'stylelint-config-standard',
    'stylelint-config-recommended-less',
    // 样式属性顺序规则
    'stylelint-config-recess-order',
    // 接入 Prettier 规则
    'stylelint-config-prettier',
    'stylelint-prettier/recommended'
  ],
  // 配置 rules
  rules: {
    
    
    // 开启 Prettier 自动格式化功能
    'prettier/prettier': true
  }
};

Add script command in package.json

{
    
    
  "scripts": {
    
    
    // stylelint 命令
    "lint:style": "stylelint --fix \"*.{css,less}\""
  }
}

Execute pnpm run lint:styleto complete the formatting of the style. Similarly, if you want to automatically format when saving, you can install Stylelint in VSCode insert image description here
so that we have completed the configuration of Stylelint