preface

Since the pit began to contact dozens of large and small projects. In the project switch, there are always some headaches:

  1. Red when editing, indicating code formatting error
    • There is no automatic repair when saving.
    • It was fixed when saved, but still reported an error.
  2. I didn’t edit it in red
    • No error is reported when saving.
    • An error was reported when saving.
  3. writeVueItem when only onscriptThe code checks the syntax,template 和 styleThere is no hint of grammar in. It will not be automatically fixed according to the specification when saved.
  4. .

With a feeling that I could not bear, I read it carefully

  1. VSCode defaultsetting.jsonconfiguration
  2. ESlint configures rules
  3. Eslint plugin – vue document
  4. Many online configuration tutorials
  5. .

If you have encountered such confusion, might as well patience to read, I believe you will have a harvest. If you’re a front-end engineer, ignore 😄

Take the VSCode + Vue project as an example.

The effect we want

  1. When editing, I was prompted with A syntax error (marked in red) according to my configured rule A.

  2. When saving, all errors are automatically fixed according to rule A.

Configuration VSCode

Auto-repair when saving and which rules to use for files are all configured in VSCode.

First, we need to find a place for VSCode to configure the rules. It has default rules and user-defined rules.

According to theshift + cmd + PsearchdeafultOpen thedefaultSetting.jsonisVSCodeIs the default configuration.

Click shift + CMD + P to search for setting to open setting.json is the custom configuration of VSCode.

The Settings in setting.json override the default Settings.

We need to write the following configuration in setting.json.

{
    // Save in esLint format for fixes
    "editor.codeActionsOnSave": {
        "source.fixAll": true."source.fixAll.eslint": true,},// Automatically formatting when saving
    "editor.formatOnSave": true.// If you have VSCode installed with the Vetur plugin, the following configuration is required
    // This prevents Vetur from checking Vue code and improves performance
    "vetur.format.enable": false."vetur.validation.template": false."vetur.validation.script": false."vetur.validation.style": false.// The following configuration requires VSCode to install the ESlint plugin
    // Use the esLint specification.vue,.js
    "[vue]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "[javascript]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    
    // Use the JSON specification for prettier
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    
    / / eslint Settings
    "eslint.alwaysShowStatus": true."eslint.validate": [
        "javascript"."vue"."html"]."eslint.options": {
        "extensions": [
            ".js".".vue"]}}Copy the code

Thus, we have the following effect:

  1. Automatically format the code and use rule fixes when saving
  2. .vue..jsFiles useeslintspecification
  3. .jsonFiles useprettierspecification

Each of the rules we configured above can be found in defaultSetting.json. There is a detailed explanation of what the rules do. Some even have official links. If you want to know more about it, you can find it yourself.

Don’t forget to install the ESlint plugin

configurationESLintThe rules

The configuration can be done in a package.json file or in a separate.eslintrc.js file. I would prefer to use a separate file configuration here. At a glance.

First, we create a new.eslintrc.js file in the root directory.

module.exports = {

}
Copy the code

If we configure our own rules one by one, it is estimated that the whole person will be bad, but fortunately we can directly use the industry recommended norms.

Of course, if you are building your project using scaffolding, you can choose to install esLint packages using scaffolding by default when you create. You can open package.json to see if it is already installed. If so, there is no need to repeat the installation.

If it is not installed, open the command line tool

npm i --save-dev eslint eslint-plugin-vue babel-eslint
Copy the code

We configure.eslintrc.js

module.exports = {
    root: true.// If it is an SSR project, node:true needs to be configured
    env: {
        browser: true.node: true
    },
    // Why is parser configured like this?
    // https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser
    parser: 'vue-eslint-parser'.parserOptions: {
        parser: 'babel-eslint'
    },
    extends: [
        // If it is a nuxt.js scaffolding project, you need to install the corresponding scaffolding and do the following configuration
        '@nuxtjs'.'plugin:nuxt/recommended'.// Let ESLint normalize vue files
        'plugin:vue/base'.// Vue3 projects need to be used. If vue2 projects are used, use plugin:vue/recommended
        'plugin:vue/vue3-recommended'].plugins: [
        // Note that the HTML option cannot be configured here for the following reasons:
        // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
        'vue'].// Configure your own rules to override the inherited rules
    rules: {
        // Set the js indent to 4 and the switch case statement case to use 4 Spaces
        indent: ['error'.4, { SwitchCase: 1}].// Use esLint to check the code in the template, where I configure 4 space indents
        'vue/html-indent': [
            'error'.4]}}Copy the code

The above configuration, everyone according to their own project characteristics, can be deleted. For example, if your project is not nuxt.js, remove ‘@nuxtjs and Plugin :nuxt/recommended from extends.

Now we have basically achieved what we want.

  1. While editing, yeah.js..vueOf the filetemplate 和 scriptUsing configuredeslintStandard inspection.
  2. When saving, use the same for the above fileseslintThe specification makes automatic repairs.

configurationstylelint

CSS,.scss, and vue files can’t be spec checked or automatically fixed. This requires the installation of stylelint.

npm i --save-dev stylelint stylelint-config-standard stylelint-scss
Copy the code

The above installation of Stylelint and the industry’s more widely used specification Stylelint-config-Standard and support for SCSS syntax stylelint-SCSS.

Next we need to configure them.

Add the.stylelintrc.json file in the root directory.

{
    // Use specification
    "extends": "stylelint-config-standard".// Create a custom indent of 4 Spaces
    "rules": {
        "indentation": 4}}Copy the code

VSCode installs the stylelint plug-in.

And you’re done! Give it a try