Vscode automatic eslint formatting when saving code

background

We expect to use vscode When coding , It can be based on eslint The rules , Automatically format our code . Then you can set vscode Automatic formatting of , To fulfill this need .

Realization way

1. install vscode plug-in unit Eslint
   

2. modify vscode Set up
   file - Preferences - Set up , Or through ctrl + shift + p => Preferences ： Open workspace settings , open vscode Set the interface
   

3. open settings.json, Add the following configuration
   

   {
         
     "search.followSymlinks": false,
     "editor.tabSize": 2,
     // To configure eslint
     "eslint.validate": [
       "javascript",  //  use eslint Rule detection for js file 
       "javascriptreact",
       "vue",
       "html",
     ],
     //  Enable auto repair on save eslint, Only supported by default .js file 
     "editor.codeActionsOnSave": {
         
       "source.fixAll.eslint": true
     }
   }
   

   

4. Then when you write code , Save code ,vscode Automatically based on eslint Rules format code

Article reference ：https://blog.csdn.net/halo1416/article/details/120945975