Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

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

Graph TD uses Vite to initialize the vue3 project --> chrome extension --> configure vscode development environment --> project code engineering specification

Initialize the VUE3 + TS project using vite

1. On the console, run the following command to install vite and create a VUe3 project using vite

npm install vite@lastest
Copy the code

If the installation is in the current Project root directory, enter./ for Project name

2. Select framework Vue

3. Select a templatevue-ts

4. Then you can see the downloaded template file in the current project

If you open the viet.config. ts configuration file, you can see that the plug-in @vitejs/plugin-vue has been introduced

5. Run commands as prompted to install the dependency packages and run the project

cd vite-project // Go to the project directory
npm install // Install dependencies
npm run dev // Run the command to start the project
Copy the code

Start-up success will see this page in your browser, if failed and start to parsing error: unexpected token error, because eslint failed to properly identify vue3 ts in grammar, to see the following vscode editor configuration solution accordingly

Chrome browser extension

As shown in the figure above, vue3 project was successfully run, but vue.js devTools cannot identify it in Chrome, and the extension shows vue.js is not detected. A search of relevant information shows that an additional beta version of the extension needs to be installed. The extension address can be downloaded by clicking on vue.js DevTools beta

Once you have successfully downloaded and started the plug-in, you are happy to see the VUE components on the console

Configure the vscode development environment

1. Vscode disables the Vetur plug-in, otherwise it will affect vue3 syntax recognition. If you have a Vue vscode Snippets plug-in installed, disable it too, otherwise the plug-in forces the Vetur plug-in to start

// Open the VScode configuration file in the path 'Code -> Preferences -> Settings'
"vetur.validation.template": false
Copy the code

2. Install Volar plug-in on VScode

Vscode installs Vue Language Features and TypeScript Vue Plugin to recognize the latest syntax in vue3 and ts syntax in vue3

3. Vscode installs the ESLint plugin

While ESlint does the double task of verifying syntax rules and formatting code, the other Prettier plugin does the opposite, where ESlint only formats JS, while ESlint does the same for formatting tools. But Prettier can format files in VUE, HTML, CSS and so on, and Prettier is more industry-wide. And ESlint and Prettier can be used together to better verify and format code

Open the vscode configuration file, set the eslint plugin configuration, and open the configuration that is automatically fixed when saved by going to Code -> Preferences -> Settings

  "editor.formatOnSave": true."eslint.autoFixOnSave": true."eslint.validate": [
    "javascript"."javascriptreact",
    {
      "language": "html"."autoFix": true
    },
    {
      "language": "vue"."autoFix": true
    },
    {
      "language": "typescript"."autoFix": true
    },
    {
      "language": "typescriptreact"."autoFix": true}].Copy the code

With this setup, code errors can be seen in real time during development, making development more efficient

4. Install the vscode Prettier plug-in

Prettier the Prettier plug-in does not automatically save Eslint from Prettier by keeping the configuration of Eslint the same as that of Prettier, such as single quotation marks and semicolons

Specification for project code engineering

1. Use NPM to install the Prettier plug-in to format the code

npm install --save-dev --save-exact prettier
Copy the code

–save-exact installs the specified version exactly, without the ^ in front of the version

2. Then create a. Prettierrc. json configuration file in the root directory, where the file can be empty or you can add user-defined rules

// .prettierrc.json
{
  "singleQuote": true."semi": true."printWidth": 120
}

Copy the code

ESlint and Prettier plugins in vscode take precedence over the configuration file (e.g.,.prettierrc.json) for the project

3. NPM installs the related ESlint plugin

npm install --save-dev eslint eslint-plugin-vue eslint-config-prettier
Copy the code

4. Create the ESlint configuration file.eslintrc.js in the root directory, using the rules recommended by vue3

// .eslintrc.js
module.exports = {
  env: {
    node: true,
  },
  extends: ['eslint:recommended', 'plugin:vue/vue3-recommended', 'prettier'],
  rules: {
    
  },
};

Copy the code

5. Add commands to script of package.json

 "scripts": {
    // ...
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"."format": "prettier . --write",},Copy the code

The project code can be formatted from the command line, and can be executed at package time through plug-in tools such as Husky

Parsing error: unexpected token error occurred because ESLint was unable to parse the TS syntax in the Vue file. This error was solved by installing @typescript-esLint/Parser

npm install @typescript-eslint/parser
Copy the code

Modify the configuration in the ESLint configuration file to run the project properly

// .eslintrc.js
parser: 'vue-eslint-parser',
parserOptions: {
  parser: '@typescript-eslint/parser',
  ecmaVersion: 2020,
  sourceType: 'module',
},
Copy the code

If you open the HelloWorld. Vue file, you will find that MSG: String has a small wave under it. You can set rules to disable the default value

// .eslintrc.js
rules: {
    'vue/require-default-prop': 'off',
}
Copy the code

8. If you want esLint errors to display directly on the browser, you can install the plugin viet-plugin-eslint

npm i --save-dev vite-plugin-eslint
Copy the code

And configure it in Vite. Congfig. Ts

// vite.congfig.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import eslintPlugin from 'vite-plugin-eslint';

export default defineConfig({
  plugins: [vue(), eslintPlugin()],
});
Copy the code

The husky plugin can be installed to execute specified commands in git hooks

Git init NPM install --save-dev husky NPX husky installCopy the code

NPX calls the installation module inside the project

Create a pre-commit file under the.husky file

npx husky add .husky/commit-msg
Copy the code

Add the two create commands above to the pre-commit project

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

When git commit is performed, the prettier code is first used and then the verification is performed to ensure that the code is compliant. If the verification fails, the submission is not allowed

The last

Above is my vuE3 project using Vite to create some small experience in the process of development and configuration, I hope to be helpful to you ~ if you can get a small praise as encouragement will be more grateful!!

“Welcome to the discussion in the comments section. The excavation authorities will draw 100 nuggets in the comments section after project Diggnation. See the event article for details.”