This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

The VUE3 project created using Vite was a bit crude and lacked many features. So this article will show you how to automatically format the vite + vue3 project configuration code. The effect after configuration is as follows:

Install the VSCode plug-in

Open VSCode and install the following plug-ins:

eslint
stylelint
volar
Copy the code

Open the VSCode configuration file (Mac Command + Shift + P, Windows CTRL + Shift + P, type Settings).

Add the following code to the configuration file:

"editor.codeActionsOnSave": {
    "source.fixAll": true,},"eslint.validate": [
    "javascript"."javascriptreact"."typescript"]."eslint.alwaysShowStatus": true."stylelint.validate": [
    "css"."less"."postcss"."scss"."vue"."sass"].Copy the code

Installation project dependencies

Install the following dependencies:

npm i -D eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-typescript eslint-plugin-vue husky sass stylelint stylelint-config-standard stylelint-scss typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser  vue-eslint-parserCopy the code

Note that formatting may fail when dependent versions do not match. For example, the ESLint plugin will report an error if it is formatted after version 8.0 and later uses version 7.0. The specific versions are as follows:

"@typescript-eslint/eslint-plugin": "^ 5.1.0"."@typescript-eslint/parser": "^ 5.1.0"."eslint": "^ 7.2.0"."eslint-config-airbnb-base": "^ 14.2.1." "."eslint-plugin-import": "^ 2.25.2"."eslint-plugin-typescript": "^ 0.14.0"."eslint-plugin-vue": "^ 7.20.0"."husky": "^ holdings"."sass": "^ 1.43.3"."stylelint": "^ 13.13.1"."stylelint-config-standard": "^ 22.0.0"."stylelint-scss": "^ 3.21.0"."typescript": "^ 4.4.3." "."vue-eslint-parser": "^ 7.11.0".Copy the code

It is recommended that you directly copy the above code into package.json file and download it.

configuration.eslintrc.js .stylelintrc.jsfile

My ESLint configuration is based on the Airbnb specification and the CSS specification uses the official plugin.

.eslintrc.jsfile

module.exports = {
    root: true.globals: {
        defineEmits: 'readonly'.defineProps: 'readonly',},extends: [
        'plugin:@typescript-eslint/recommended'.'plugin:vue/vue3-recommended'.'airbnb-base',].parser: 'vue-eslint-parser'.plugins: [
        '@typescript-eslint',].parserOptions: {
        parser: '@typescript-eslint/parser'.ecmaVersion: 2020,},rules: {
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'.'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off'.'no-bitwise': 'off'.'no-tabs': 'off'.'array-element-newline': ['error'.'consistent'].indent: ['error'.4, { MemberExpression: 0.SwitchCase: 1.ignoredNodes: ['TemplateLiteral']}],quotes: ['error'.'single'].'comma-dangle': ['error'.'always-multiline'].'object-curly-spacing': ['error'.'always'].'max-len': ['error'.120].'no-new': 'off'.'linebreak-style': 'off'.'import/extensions': 'off'.'eol-last': 'off'.'no-shadow': 'off'.'no-unused-vars': 'warn'.'import/no-cycle': 'off'.'arrow-parens': 'off'.semi: ['error'.'never'].eqeqeq: 'off'.'no-param-reassign': 'off'.'import/prefer-default-export': 'off'.'no-use-before-define': 'off'.'no-continue': 'off'.'prefer-destructuring': 'off'.'no-plusplus': 'off'.'prefer-const': 'off'.'global-require': 'off'.'no-prototype-builtins': 'off'.'consistent-return': 'off'.'vue/require-component-is': 'off'.'prefer-template': 'off'.'one-var-declaration-per-line': 'off'.'one-var': 'off'.'import/named': 'off'.'object-curly-newline': 'off'.'default-case': 'off'.'import/order': 'off'.'no-trailing-spaces': 'off'.'func-names': 'off'.radix: 'off'.'no-unused-expressions': 'off'.'no-underscore-dangle': 'off'.'no-nested-ternary': 'off'.'no-restricted-syntax': 'off'.'no-mixed-operators': 'off'.'no-await-in-loop': 'off'.'import/no-extraneous-dependencies': 'off'.'import/no-unresolved': 'off'.'no-case-declarations': 'off'.'template-curly-spacing': 'off'.'vue/valid-v-for': 'off'.'@typescript-eslint/no-var-requires': 'off'.'@typescript-eslint/no-empty-function': 'off'.'no-empty': 'off'.'@typescript-eslint/no-explicit-any': 'off'.'guard-for-in': 'off'.'@typescript-eslint/ban-types': 'off'.'class-methods-use-this': 'off'.'no-return-await': 'off'.'vue/html-indent': ['error'.4].'vue/html-self-closing': 'off'.'vue/max-attributes-per-line': ['warn', {
            singleline: {
                max: 3.allowFirstLine: true,},multiline: {
                max: 1.allowFirstLine: false,}}],'vue/singleline-html-element-content-newline': 'off',}}Copy the code

.stylelintrc.jsfile

module.exports = {
    extends: 'stylelint-config-standard'.rules: {
        'indentation': 4.'selector-pseudo-element-no-unknown': [
            true,
            {
                ignorePseudoElements: ['v-deep']}],'number-leading-zero': 'never'.'no-descending-specificity': null.'font-family-no-missing-generic-family-keyword': null.'selector-type-no-unknown': null.'at-rule-no-unknown': null.'no-duplicate-selectors': null.'no-empty-source':null.'selector-pseudo-class-no-unknown': [true, { ignorePseudoClasses: ['global']]}}}Copy the code

Hit the pit

Unknown word (CssSyntaxError)error

This error is because the installed plug-in stylelint stylelint-config-standard stylelint-SCSS version is too new, the support for vue3 template files is not very good, and the CSS code for.vue files cannot be correctly recognized. Therefore, it is good to reduce the versions of the above three plug-ins to a larger version. The final version is as follows:

"Stylelint" : "^ 13.13.1", "stylelint - config - standard" : "^ 22.0.0", "stylelint - SCSS" : "^ 3.21.0",Copy the code

ignore.vueInvalid HTML template validation rule in file

For example, if you set the length of each line of HTML template code text to 100, ESLint will report an error if it exceeds this length. If you still want to exceed this length, you can ignore this rule:

/* eslint-disable max-len */
Copy the code

Note that the above line of code ignoring validation does not take effect because the comment is a JavaScript comment and we need to change the comment to HTML format for ignoring validation to take effect:

<! -- eslint-disable max-len -->
Copy the code

conclusion

After this configuration, basically all the code in the VuE3 project can be formatted (CSS, JS, HTML, and various derived code). Prettier was not used because it was not free enough and could already be replaced by the esLint stylelint.

In order not to let everyone step on the pit again, I have uploaded the configured project demo to Github, if necessary, directly clone the project.

Project address: github.com/woai3c/vite…

Please feel free to discuss in the comments section. The nuggets will draw 100 nuggets in the comments section after the diggnation project. See the event article for details