Building Vue3 Component Library from Scratch #11 ESlint + Prettier + Stylelint

If you want to do something well, you must first sharpen your tools. A good project must have a unified standard, such as code standards, style standards, and code submission standards, etc. The purpose of a unified code standard is to enhance team development cooperation, improve code quality, and establish a foundation for development, so everyone must strictly adhere to it.

This article will introduce ESLint + Prettier + Stylelint to standardize the code.

ESlint

ESLint statically analyzes your code to quickly find problems. Its goal is to ensure code consistency and avoid errors. Let's see how to use it in our project.

Firstly, install ESLint.

pnpm add eslint -D -w

Initialize ESLint

pnpm create @eslint/config

At this point, some options will appear for us to choose.

Now we will find that the ESlint configuration file .eslintrc.cjs has appeared in the root directory. After some configuration changes to this file, it is 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'
  }
};

Create .eslintignore to ignore some files.

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

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

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

Then, run 'pnpm run lint:script', you can see report of the code.

Integrate Prettier

Actually, using ESLint alone is not enough. ESLint is often combined with Prettier to fully utilize their capabilities. Prettier is mainly used for code formatting. Next, let's see how to combine the two.

Similarly, install Prettier.

pnpm add prettier -D -w

Create .prettierrc.cjs

module.exports = {
    printWidth: 80,
    tabWidth: 2,
    useTabs: false, //Whether to use tabs for indentation. The default is false, which means spaces are used for indentation.
    singleQuote: true, // Whether to use single quotes for strings. The default is false, which means double quotes are used.
    semi: true, // Whether to use semicolons at the end of lines. The default is true.
    trailingComma: "none", // Whether to use trailing commas
    bracketSpacing: true // Whether to have spaces between the braces of objects. The default is true, resulting in: { a: 1 }.
}

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

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

Change .eslintrc.cjs

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
    '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: {
    'prettier/prettier': 'error',
    '@typescript-eslint/ban-ts-comment': 'off',
    'vue/multi-word-component-names': 'off'
  }
};

Finally, by executing 'pnpm run lint:script', you can complete the ESLint rule validation check and automatic fix by Prettier.

By now, the configuration of ESLint+Prettier is complete. Next, we will introduce Stylelint (a style specification tool) to the project.

Stylelint

Firstly, install tool chain.

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

Create .stylelintrc.cjs

module.exports = {
  // Register the prettier plugin for stylelint.
  plugins: ['stylelint-prettier'],
  // Inherit a set of rule collections.
  extends: [
    // standard rule set
    'stylelint-config-standard',
    'stylelint-config-recommended-less',
    // Style property order rules
    'stylelint-config-recess-order',
    // Incorporate Prettier rules
    'stylelint-config-prettier',
    'stylelint-prettier/recommended'
  ],
  // Configure rules
  rules: {
    // Enable Prettier auto-formatting
    'prettier/prettier': true
  }
};

Add script command in the package.json file.

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

By running 'pnpm run lint:style', you can complete the style formatting.

Now we have completed the configuration of Stylelint.

The final source code: https://github.com/markliu2013/StellarNovaUI