This paper is developed from the following aspects:

  • Create a project with Vite
  • Use ESLint +prettier specification projects

Create a project

  • The use of NPM 
    npm init @vitejs/app
Copy the code

Complete the following as prompted:

  1. Enter a project name

  2. To select the framework, we use vue

  3. Select the vue + ts

4. Finally, install the dependency and run the project NPM install and NPM run dev

Integrate prettier configuration

Prettier is a powerful code formatter that supports: JavaScript, JSX, Angular, Vue, Flow, TypeScript, HTML, JSON, YAML… And so on. It removes all original styles and ensures that all output code conforms to a consistent style.

  1. Install the prettier

    npm install prettier -D
Copy the code

  2. Creating a configuration file Create the. Prettierrc file in the root directory of the project. (For details, see Options on the official website)

    {
  "useTabs": false."tabWidth": 4."printWidth": 100."singleQuote": true."trailingComma": "none"."bracketSpacing": true."semi": false
}
Copy the code

  3. When vsCode is used, the configuration in the. Prettierrc file is read when the plug-in is installed. CTRL + S Prettierrc

    If that doesn’t work, CTRL + Shift + F select the formatter.

  4. 13, By the way, how to read the document configuration on the prettier website.

Integrate ESLint configuration

As projects get bigger and bigger, each programmer has a different style, and while the original developer may be fine, subsequent developers may be laughing, Eslint solves this problem.

Concept: Lint is a general term for tools that verify code formatting. Examples include Eslint,……….

  1. First install Eslint

    npm install eslint -D
Copy the code

  2. Automatic generation of Eslint configuration files. For details, see automatic Generation configuration.

    Run the NPM script command in the root directory:

    / / use NPX
npx eslint --init
// Or follow the official website
./node_modules/.bin/eslint --init
Copy the code

    Complete the operation as prompted:

    • How would you like to use ESLint? (How do you want to use ESLint?)

      To check syntax only To check syntax and find problems Check syntax, find problems, and enforce code style

      We chose To check syntax, find Problems, and enforce code style.

    • What type of modules does your project use? (What type of modules does your project use?)

      JavaScript modules (import/export)

      CommonJS (require/exports)

      None of these

      We choose JavaScript modules (import/export).

    • Which framework does your project use? (What framework does your project use?)

      React vue.js None of these

      Let’s go with vue.js.

    • Does your project use TypeScript? (Do you use Typescript in your projects?)

      Yes/No

      Let’s say Yes.

    • Where does your code run? (Where does your code run?)

      Browser Node

      We’re gonna choose Browser

    • How would you like to define a style for your project? (What style do you want to define for your project?)

      Use a popular style guide to Answer questions about your style to Inspect your JavaScript Check your javascript files

      We chose to Use a popular style Guide.

    • Which style guide do you want to follow? (What style guide do you want to follow?)

      Reality: github.com/airbnb/java… Standard: github.com/standard/st… Google: github.com/google/esli… XO: github.com/xojs/eslint…

      All four of the above styles are popular javascript style guides in the community, and we chose Airbnb: github.com/airbnb/java… This is the most star on Github.

    • What format do you want your config file to be in? (What format do you want the configuration file to be in?)

      JavaScript

      YAML

      JSON

      We chose a configuration file in javascript format

    • As a final step, ESLint will tell us which NPM packages you need to install based on the configuration we selected above, by selecting Yes.

  3. Using Eslint in VSCode requires the Eslint plug-in to be installed

  4. VSCode configuration

    • Configuration in the global environment

      {
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true // Use ESLint to fix when CTRL +s saves}},Copy the code

    • Or locally

      // Setting. Json file
{
    "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true}},Copy the code

Common Problems

To solveprettier,eslintConflict problem

On projects, we use a combination of ESLint and prettier, so conflicts are inevitable. Here we have two aspects: conflict presentation and conflict resolution

  1. Present the conflict

    • The configuration of prettier is as follows:

      / /. Prettierrc. Json file
{ 
  "tabWidth":2 ,
  "singleQuote":true // Open single quotation marks
}
Copy the code

    • Eslint is configured as follows: (Just pay attention to the rules configured in rules)

      module.exports = {
  env: {
    browser: true.es2021: true,},extends: ['plugin:vue/essential'.'airbnb-base'].// Add the prettier plug-in,
  parserOptions: {
    ecmaVersion: 12.parser: '@typescript-eslint/parser'.sourceType: 'module',},plugins: ['vue'.'@typescript-eslint'].rules: {
    'vue/no-multiple-template-root': 'off'.quotes: ['error'.'double'].// Use "double quotes" as the rule, otherwise use "error" as the rule (you can also change it to warn).}};Copy the code

      “When we CTRL +s, prettier changes all quotes to single quotes, whereas esLint rules for” double quotes “or” error “, where there’s a conflict.

  2. Resolve the conflict

    • Installing a plug-in

      npm i eslint-plugin-prettier eslint-config-prettier -D
Copy the code

    • Configure the plug-in in the.eslintrc.js file

      module.exports = {
  env: {
    browser: true.es2021: true,},extends: [
    'plugin:vue/essential'.'airbnb-base'.'plugin:prettier/recommended'.// Add the prettier plug-in].parserOptions: {
    ecmaVersion: 12.parser: '@typescript-eslint/parser'.sourceType: 'module',},plugins: ['vue'.'@typescript-eslint'].rules: {
    quotes: ['error'.'double'],}};Copy the code

    • Perfect Conflict resolution

Support for multiple root nodes (Fragements) in VUe3.0

‘Eslint’, ‘Prettier’, ‘Eslint’, ‘Prettier’, ‘Eslint’, ‘Prettier’

  • Error: The template root requires exactly one element.// The template root requires exactly one element

  • Solution: In the.eslintrc.js file, the configuration of rules is successfully resolved.

    module.exports = {
  env: {
    browser: true.es2021: true,},... .rules: {
    'vue/no-multiple-template-root': 'off'.// Disable the verification of multiple root nodes}};Copy the code

Intellectual development

In some cases, esLint is configured in a project and an error is reported, but you are not familiar with how to configure a rule.

Code such as console.log should not be error, perhaps warn is more appropriate. Here’s an example:

Configuration on the official website:

In this file you can configure: