Building front-end Project 1 from Scratch (Vue3+Vite+TS+Eslint+Airbnb+ Prettier)

Build a lean front-end project step by step from scratch.

Vue3.0 + Vite + TypeScript + Element Plus + Vue Router + AXIos + Pinia

Canonicalization: Eslint + Airbnb JavaScript Style + husky + Lint-staged

Package management: YARN

This chapter content

Create a new Vue3+Ts project and use Eslint and Prettier for code constraints and style uniformity.

Initialize the project

Vite supports vue-TS templates, so you can create Vue3.0 + Vite + TypeScript projects directly by using the following command.

yarn create vite vue3-ts-demo --template vue-ts
Copy the code

Run the project as prompted after it is created.

cd vue3-ts-demo
yarn
yarn dev
Copy the code

The project runs on port 3000. If port conflicts occur, you need to configure the server field in the vite. Config. ts file.

Eslint

The installation

Eslint is only needed at development time, so just add it to development-time dependencies.

# eslint install yarn add eslint --devCopy the code

configuration

Create the.eslintrc.js file and add the basic configuration

module.exports = {
  root: true,
  env: {
    browser: true, // browser global variables
    es2021: true, // adds all ECMAScript 2021 globals and automatically sets the ecmaVersion parser option to 12.
  },
  parserOptions: {
    ecmaVersion: 12,
  },
}
Copy the code

Add Vue syntax verification

Vue plugin for ESLint to check syntax errors in.vue files.

Yarn add eslint-plugin-vue --devCopy the code

Add the configuration

// .eslintrc.js
..
parser: "vue-eslint-parser",  // ++
extends: [
    'plugin:vue/vue3-recommended' // ++
]
...
Copy the code

Add TypeScript support

Install the TS plug-in and parser

yarn add @typescript-eslint/eslint-plugin --dev

# typescript parser
yarn add @typescript-eslint/parser --dev
Copy the code

Add the configuration

// .eslintrc.js
...
  extends: [
    "plugin:@typescript-eslint/recommended",     // ++
  ]  
  plugins: ['@typescript-eslint'],    // ++
  parserOptions: {
    parser: '@typescript-eslint/parser',  // ++
  },
...
Copy the code

Airbnb JavaScript Style

Install the eslint plugin eslint-config-Airbnb-base for Airbnb base rules.

yarn add eslint-config-airbnb-base --dev
Copy the code

Add the configuration

// .eslintrc.js
...
extends: [
    'plugin:vue/vue3-recommended',
    'airbnb-base', // ++
],
...
Copy the code

Test Eslint

Add commands to package.json

// package.json
...
"scripts": {

    "lint": "eslint src --fix --ext .ts,.tsx,.vue,.js,.jsx"   // ++
}
... 
Copy the code

run

yarn lint
Copy the code

Error as follows:

Eslint-plugin-import is not installed.

yarn add eslint-plugin-import --dev
Copy the code

Run yarn Lint again, and the following error occurs

— 2022.02.28 Update —

This is because defineProps is used in the Helloworld.vue component, but there is no reference, just add the configuration in.eslintrc.js.

// .eslintrc.js

module.exports = {
    globals: {
        defineProps: 'readonly',
    },
}
Copy the code

The operation succeeded.

prettier

The installation

Install the prettier

# install prettier yarn add prettier --dev # install eslint-plugin-prettier yarn add eslint-plugin-prettier --devCopy the code

configuration

Add the configuration

// .eslintrc.js
...
plugins:'@typescript-eslint', 'prettier'], // ++
rules: {
    'prettier/prettier': 'error', // ++
},
...
Copy the code

New prettierrc. Js

//.prettierrc.js module.exports = {singleQuote: true, // use single quotes}Copy the code

Test prettier

Add commands to package.json

// package.json
...
"scripts": {
    "prettier": "prettier --write .",   // ++
}
... 
Copy the code

Example Run YARN Lint, an error occurs when rule ESLint conflicts with rule Prettier.

# install eslint-config-prettier yarn add eslint-config-prettier --devCopy the code

Add configuration, the plugin: prettier/configuration, it must be put in the end. Because the rule introduced after extends overrides the previous rule.

// .eslintrc.js ... Extends: [' plugin: prettier/it ', / / + + placed at the end of the array extends],...Copy the code

After the above configuration is complete, you can run the following command to test the following code to check the formatting effect:

# esLint check YARN Lint # prettier Automatically format yarn prettierCopy the code

summary

So far the project is still in our local development environment, adding code constraints and styles to the local development environment. When uploading Git, how to ensure that everyone’s code constraints and style are consistent? This requirement can be implemented using the Git hooks technique. The next article will implement a step by step process to double check ESLint before committing code to Git to ensure that code committed to Git has the same code constraints and style.