vue3+vite project configuration ESlint, pritter plug-in

Configure ESlint and pritter plugins

In a Vue 3 + Vite project, you can configure ESLint and Prettier plugins with the following steps:

1. Install plugins:
   In the project root directory, open a terminal and execute the following commands to install the ESLint and Prettier plugins:

   npm install eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier --save-dev
   

   The above command will install ESLint, Prettier and related plugins and configurations.

2. Create .eslintrc.jsa file:
   Create a file named in the project root directory .eslintrc.jsand add the following content:

   module.exports = {
         
         
     extends: [
       'plugin:vue/vue3-recommended',
       'prettier',
       'prettier/vue'
     ],
     plugins: ['vue', 'prettier'],
     rules: {
         
         
       'prettier/prettier': 'error'
     }
   };
   

   In the above configuration, we used plugin:vue/vue3-recommendedthe extension to configure ESLint based on the rules recommended by Vue 3. Also, we have introduced prettierand prettier/vueextensions to support Prettier's formatting rules. Finally, we configured prettier/prettierthe rule, setting it to an error level, to ensure that the code conforms to the Prettier format.

3. Create .prettierrc.jsa file:
   Create a file named in the project root directory .prettierrc.jsand add the following content:

   module.exports = {
         
         
     semi: true,
     singleQuote: true,
     trailingComma: 'es5',
     printWidth: 80,
     tabWidth: 2
   };
   

   In the above configuration, we used some common Prettier configurations, such as semi(whether to use semicolon), singleQuote(whether to use single quote), trailingComma(whether to use trailing comma), printWidth(maximum length of line) and tabWidth(number of spaces for indentation) .

4. Configure the VS Code editor:
   If you are using the VS Code editor, you can configure automatic formatting and code standard checking when saving through the following steps:

   • Install the following plugins in the extension store: ESLint, Prettier - Code formatter

   • Open the settings ( Preferences → Settings) of VS Code, search for and edit the following setting items:

     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "[vue]": {
             
             
       "editor.defaultFormatter": "dbaeumer.vscode-eslint"
     },
     "eslint.validate": [
       "javascript",
       "javascriptreact",
       {
             
             
         "language": "vue",
         "autoFix": true
       }
     ]
     

   The above settings will enable code formatting on save and ESLint for Vue files.

5. Run code inspection and formatting:
   Execute the following commands in the terminal to inspect and format the code:

   npx eslint .
   npm run lint --fix
   

   Use the above command to check the code specification in the project and fix some simple problems.

Through the above steps, you can configure ESLint and Prettier plugins in your Vue 3 + Vite project and use them to maintain code quality and style consistency.

Use scenarios and advantages and disadvantages

Using ESLint and the Prettier plugin brings the following scenarios and pros and cons:

scenes to be used:

1. Unified code style: ESLint and Prettier can enforce a consistent code style specification, ensure that the code written by team members has a consistent style, and improve the readability and maintainability of the code.
2. Detect potential problems: ESLint can detect potential problems and errors in the code, such as undeclared variables, unused variables, unnecessary code, etc., to help developers find and fix these problems during the development process.
3. Automatic formatting: Prettier can automatically format the code so that the code maintains consistent indentation, line breaks, quotation marks, etc., reducing the time and workload of manually adjusting the code format.

advantage:

1. Consistent code style: By configuring unified ESLint and Prettier rules, you can ensure that the code written by team members has a consistent style and improve the readability and maintainability of the code.
2. Improve code quality: ESLint can detect potential problems and errors in the code, help developers find and fix these problems during the development process, and improve the quality of the code.
3. Automatic formatting: Prettier can automatically format the code so that the code maintains consistent indentation, line breaks, quotation marks, etc., reducing the time and workload of manually adjusting the code format.

shortcoming:

1. Configuration complexity: Configuring ESLint and Prettier may take some time and learning costs, especially for first-time developers who need to understand the rules and configuration options of the plugin.
2. Reduced flexibility: Certain rules and formatting options may not match individual or team preferences, so additional time and effort may be required to tune and customize rules and options.
3. Additional overhead: ESLint and Prettier need to be run every time the code is saved or built to check and format the code, which can add some additional overhead, especially in large projects.

To sum up, ESLint and Prettier plug-ins play an important role in unifying code style, improving code quality and automatic formatting, but they need to weigh configuration complexity and flexibility, as well as additional overhead. In most cases, they are very beneficial for project maintenance and team collaboration.

Vite packs and splits js and css

When using Vite for packaging, the generated JavaScript and CSS files can be split through configuration. Here are some commonly used configuration options:

1. Splitting JavaScript files:
   In the file, configuration items vite.config.jscan be used to specify the splitting method of JavaScript files. rollupOptionsFor example, the chunks to split into can be specified manually using outputthe option's attribute:manualChunks

   export default {
         
         
     rollupOptions: {
         
         
       output: {
         
         
         manualChunks: {
         
         
           vendor: ['vue', 'axios'], // 将 vue 和 axios 打包到 vendor.js
           utils: /^lodash/ // 打包以 lodash 开头的模块到 utils.js
         }
       }
     }
   }
   

   In the above configuration, we specified two split blocks, vendorand utils. vendorBlocks contain Vue and Axios, while utilsblocks contain modules starting with lodash.

2. Split CSS files:
   By default, Vite will pack all CSS files into one file. If you need to split CSS files, you can use extractCSSconfiguration items to enable splitting:

   export default {
         
         
     build: {
         
         
       cssCodeSplit: true
     }
   }
   

   After using the above configuration, Vite will extract the CSS of each entry file into a separate file.

It should be noted that splitting JavaScript and CSS files may increase additional network requests, so it is necessary to balance loading performance and file quantity when splitting. According to the actual situation, a reasonable split configuration can be carried out according to the dependencies of the modules and the code size.