Build Vite2+Vue3+TS project and configure JS, CSS and GIT submission specifications

I. Project generation

1. Scaffolding project

Using scaffolding, generate a Viet-Vue3 project

npm init vite@latest my-vite-vue3
Copy the code

The new directory is as follows:

2. Install the dependencies and start the project

cd my-vite-vue3
npm i
npm run dev
Copy the code

3. Test the

Successfully opened in the browser, the project is successfully started

ESLint + Prettier

1. Install ESLint

npm i eslint -D
Copy the code

2. Initialize ESLint

eslint --init
Copy the code

If ESLint is not installed globally, you can add the following statement to the package.json file:

// pagckage.json
{
    "scripts": {
        "init": "eslint --init"
    }
}
Copy the code

This is followed by a series of question-and-answer options

# Select helps us find non-canonical syntax and enforce it? How would you like to use ESLint? ... To check syntax only To check syntax and find problems ❯ To check syntax, find problems, And enforce code style # What type of modules does your project use? ... ❯ JavaScript modules (import/export) CommonJS (require/exports) None of these # Which framework does your project use? ... React ❯ vue.js None of these # Does your project use typescript? No/Yes # Select esLint running environment browser + Node? Where does your code run? ... (Press <space> to select, <a> to toggle all, < I > to invert selection) How would you like to define a style for your project? ... ❯ Use a popular style guide Answer questions about your style Inspect your JavaScript file(s) # choose open source configuration options choose standard? Which style guide do you want to follow? ... Reality: https://github.com/airbnb/javascript ❯ Standard: https://github.com/standard/standard Google: https://github.com/google/eslint-config-google XO: https://github.com/xojs/eslint-config-xo # choose ESLint JavaScript in the configuration file format? What format do you want your config file to be The in?... ❯ JavaScript YAML JSON # 怎 么 提 示 怎 么 提 示? · No/Yes... Successfully created .eslintrc.js fileCopy the code

Executing script verification

npm run lint
Copy the code

The console will report the following error

Eslint is enabled, so how do you solve the above problem?

Problem 1: ‘defineProps’ is not defined

Solution: Just add defineProps to import

import { ref, defineProps } from 'vue'

defineProps<{ msg: string }>()
Copy the code

The template root requires exactly one element vue/no-multiple-template-root–template– does not allow multiple roots. This is the validation specification for Vue2

Solution: we need to change the vue extension of.eslintrc.js to the validation specification of Vue3

  extends: [
    'plugin:vue/vue3-essential',
  ]
Copy the code

3. Create the. Eslintignore,. Prettierrc. js, and. Prettierignore files

• Create an.eslintignore file to configure directories and files in the file, skipping ESLint checks
• When we create the.prettierrc.js file, we can modify the default configuration for Prettier
• Example Create a. Prettierignore file where the Prettier format is skipped by configuring directories and files

// .eslintignore /public/ /dist/ /node_modules/ package.json .eslintrc.js // .prettierrc.js module.exports = { semi: SingleQuote: true, // Use trailingComma: 'all', // use comma at end of object} //.prettierignore /public/ /dist/ /node_modules/ package.jsonCopy the code

4. Format Vue files

Now open components/HelloWorld. Vue, modify a div in the template, file tempalate part of code formatting is not effective. At this point, ESLint still lacks the ability to format vue files (ESLint only formats JS files by default), so you need to install the following NPM package:

npm i prettier -D
npm i eslint-plugin-prettier -D
npm i @vue/eslint-config-prettier -D
npm i @vue/eslint-config-typescript -D
Copy the code

Add the above configuration rule library to the extends(extension) of.eslintrc.js:

 extends: [
    'plugin:vue/vue3-essential',
    'standard',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint',
  ]
Copy the code

PS: remember to restart VSCode after modification, otherwise it may not take effect

3. Configure Stylelint

• Learn the latest CSS syntax
• Extract embedded styles from HTML, Markdown, and CSS-in-JS objects and template text
• Parsing CSS-like syntax, such as SCSS, Sass, Less, and SugarSS
• Has more than 170 built-in rules to catch errors, apply restrictions, and enforce style rules
• Plug-ins are supported, so you can create your own rules or use community-written plug-ins
• Automatically fixes most style violations
• Support for shareable configurations that can be extended or created

1. Install Stylelint

NPM I stylelint -d NPM I stylelint-config-standard -d // Configure stylelint rules NPM I stylelint-config-prettier -d // NPM I stylelint-order -d // Close all rules that aren't necessary or might conflict with Prettier NPM I stylelint-order -d // Control the order of CSS We can pass a CSS attribute array NPM I stylelint-config-recess-order -d // CSS sequence configuration, a written list of configured attributes, and when formatting, It's going to be sorted in that orderCopy the code

2. Create the. Stylelintrc.js file

The default configuration of stylelint can be modified

module.exports = {
  root: true,
  plugins: ["stylelint-order"],
  extends: ["stylelint-config-standard", "stylelint-config-prettier", "stylelint-config-recess-order"],
  rules: {
  },
}
Copy the code

3. Create the. Stylelintignore file

Files or directories configured in files can bypass stylelint formatting

/dist/*
/public/*
public/*
*.js
*.ts
*.png
*.jpg
*.webp
*.ttf
*.woff
Copy the code

Husky + Lint-staged + COMMITlint (

1. The configuration of husky

Husky is a git hook that can be used to mount a git hook. Before committing or pushing a git hook, you can check esLint or stylelint. Commit or push operations are not allowed. And verify that MSG information conforms to the specification during commit MSG.

Husky has the following flaws:

• Husky will lint all the files in the project, even if we change only part of the file, which is inefficient
• Husky hooks can only execute one command, and sometimes we want to execute multiple instructions before committing, such as ESLint, Stylelint, Commitlint, etc. As a result, Husky is generally used in conjunction with Lint-staged and is rarely used alone.

1) Install Husky

npm i husky -D
Copy the code

2) Add the prepare script to package.json

{
  "script": {
    "prepare": "husky install"
  }
}
Copy the code

3) Run the prepare script

npm run prepare
Copy the code

A husky directory is generated in the root of your project to hold git hooks

4) Add pre-commit hooks

Check esLint, stylelint, and so on before committing

npx husky add .husky/pre-commit "npm run lint"
Copy the code

NPM run Lint NPM run Lint NPM run lint NPM run lint NPM run lint NPM run lint NPM run lint

#! /bin/sh . "$(dirname "$0")/_/husky.sh" npm run lintCopy the code

Test the

After main.ts, add console.log to save the configuration and run the following command

git commmit -m 'test'
Copy the code

If ESLint displays an error message and prevents the COMMIT operation, the configuration is successful

5) Add the commit-msg hook

During the commit MSG, the content of MSG is verified according to the specification. If the MSG does not meet the specification, the COMMIT operation is not allowed

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
Copy the code

The shell script commit-msg will be generated in the. Husky directory as follows:

#! /bin/sh "$(dirname "$0")/_/husky.sh" npx --no-install commitlint --edit "$1"Copy the code

It needs to be used with the commitlint below and then tested

2. Configuration lint – staged

1) Install Lint-staged

Lint-staged files are only lint-tested for staging (git added) files, and it allows you to specify suffixes for executing instructions, and to execute additional shell instructions step by step

npm i lint-staged --save-dev
Copy the code

2) Add the configuration to package.json

"lint-staged": {
    "*.vue": [
      "eslint --fix",
      "stylelint --fix"
    ],
    "*.{js,jsx,ts,tsx}": "eslint --fix",
    "*.{htm,html,css,sss,less,scss,sass}": "stylelint --fix"
  },"lint-staged": {
    "*.vue": [
      "eslint --fix",
      "stylelint --fix"
    ],
    "*.{js,jsx,ts,tsx}": "eslint --fix",
    "*.{htm,html,css,sss,less,scss,sass}": "stylelint --fix"
  },
Copy the code

Modify the pre-commit file

#! /bin/sh . "$(dirname "$0")/_/husky.sh" npx lint-staged --allow-empty $1Copy the code

Test the

Git commmit -m ‘test’. If an ESLint error message is displayed, the configuration is successful

3. The configuration commitlint

The main purpose is to verify that the MSGS of commit MSG conform to the specification

1) Install commitLint dependencies

npm install @commitlint/cli @commitlint/config-conventional --save-dev
Copy the code

2) Create and configure the comminlint.config.js file

Module. exports = {extends: ['@commitlint/config-conventional'], // imports from module. Exports = {commitlint: ['@commitlint/config-conventional'], // imports from module.Copy the code

3) Follow these steps to test it

1. Remove the mian. Ts fileconsole.log
2. performgit commmit -m 'test'Comminlint has taken effect if the terminal displays invalid MSG commit information and the commit operation aborts
3. Submit again according to the MSG specification and executeGit commmit -m 'fix: fix main.ts file ', commit is successfully committed

ESLint + Prettier + Stylelint

1. Install the following plug-ins:

• Vue Language Features (Volar) Syntax support for Vue3.0
• The TypeScript Vue Plugin (Volar) is a Vue plug-in for TypeScript servers
• Iconify IntelliSense Iconify preview and search
• ESLint script code checks
• Prettier formatting code
• Stylelint CSS formatting
• The dotenv. env file is highlighted
• EditorConfig for VS Code, this plug-in allows the compiler to read configuration files

PS: We need to disable the Vetur plugin, otherwise the Volar plugin will not work

2. The configuration setting. Json

1. Configure the workspace setttings. Json file

{// # Automatically format "editor.formatOnSave": false, "editor.codeActionsOnSave": {" source.fixall.eslint ": true, "source.fixAll.stylelint": true } }Copy the code

2. Json user area, create a. Vscode /settings.json file in the project root directory.

{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
}
Copy the code

3. Configure the EditorConfig file

Create an. Editorconfig file in the project root directory. Once created, the code specification rules defined in this file will be higher than the compiler’s default code specification rules.

 root = true
 [*]
 charset = utf-8
 indent_style = space
 indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
 end_of_line = auto
Copy the code

Six, step on the pit

1. performnpm run lint, the console reportsUnknown word (CssSyntaxError)Error because the latest stylelint Stylelint-config-Standard does not support the Vue 3 template file very well and does not correctly recognize the CSS code for the. Vue file. So the following three files need to be degraded

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

2. The problem that stylelint formatting in VSCode does not take effect is also to degrade the stylelint, select 0.87.6 version to install, and the detailed operations are as follows

Seven, reference

• Blog.csdn.net/weixin_4513…
• Juejin. Cn/post / 702272…
• www.cnblogs.com/Yellow-ice/…
• www.cnblogs.com/Yellow-ice/…
• www.cnblogs.com/Yellow-ice/…
• Segmentfault.com/a/119000004…
• www.npmjs.com/package/hus…
• typicode.github.io/husky/#/
• www.npmjs.com/package/lin…