vue front-end HbuliderEslint real-time verification automatic repair settings

Whether it is a multi-person collaboration or a personal project, code standards are very important. Doing so can not only avoid basic syntax errors to a great extent, ESLint is a grammar rule and code style checking tool that can be used to ensure that grammatically correct and uniformly styled code is written.

ESLint plugin installation in HBuilderX

HBuilderX includes 4 syntax checking plug-ins: htmlhint, stylelint, eslint-plugin-vue, eslint-js. Click Tools -> Plugin Installation, the interface is as follows:

Click Plugin Market to enter the Plugin Market and enter eslint to search.

Click eslint, go to the details page, and click Install Plugin. Note: hbulider version must be 2.6.8 or above

After installing eslint-vue and eslint-js. Click on the menu settings and check Save automatic repairs

Custom eslint-js rules

Click on the above picture "Open file .eslintrc.js for configuration", and open the file code as follows:

  module.exports = {  
      "plugins": [  
          "html"  
      ],  
      "parser": "esprima",  
      "parserOptions": {  
          "ecmaVersion": 2018,  
          "sourceType": "module",  
          "ecmaFeatures": {  
              "jsx": true  
          },  
          "allowImportExportEverywhere": false  
      },  
      "rules": {                                  
          "camelcase": 2, //Force camel case naming,  
          "indent": [2, 4], // indentation style "id-match": 0, // name detection "init-declarations": 1, // must be assigned an initial value when declaring "no-undef": 1, // can not have undefined variables "no-multi-spaces": "error", // prohibit multiple spaces "semi": [2, "always"] ,// automatic addition of semicolons "quotes": ["error", "single"] // use single quotes }  
  };  

Detailed rules reference: eslint common configuration restarts Hbulider and automatically fixes code inconsistencies in JS code each time it is saved.

Precautions

The above settings for using the Hbulider code automatic repair function are only applicable to Hbulider versions above 2.6.8.
References: HBuilderX syntax check, eslint real-time check automatic repair function description

The above is the detailed content of the real-time verification and automatic repair settings of HbuliderEslint on the vue front end. For more information about HbuliderEslint real-time verification and automatic repair, please pay attention to other related articles on 123WORDPRESS.COM!