Vscode of editor IDE

Time:2021-3-3

Many times, we are faced with changing the project team, changing within the company, and so on. We need to clear the previous permissions, changing the computer, and so on. It’s really annoying, so the record is also for us to use more quickly and conveniently next time

Plug in installation

Personal commonly used some plug-ins, found easy to use will be updated

Plug in name function
vscode-fileheader File header information
ESLint Code verification tool
Code Time Statistics of coding time
Code Spell Checker Spelling check
Auto Close Tag Auto close label
Auto Rename Tag When modifying HTML tags, automatically modify the matching tags
TODO Highlight Todo highlight
Bracket Pair Colorizer Highlight matching brackets with different colors
vetur Vue code prompt plug in
vscode-icons File Icon
One Dark Pro Vscode theme
Code Time Statistics of coding time
Local Histoty Do you promise that the local historical documents will be installed, and you will not be afraid of misoperation any more
GitLens — Git supercharged Display git modification records by line
Live Server Start local service
TODO Highlight Highlight of todo fix me
Fira Code(font file) It’s not a plug-in. It’s a recent favorite font. If it’s misused by novices, it will modify the basic syntax display. It’s not recommended for novices to use it

Vscode eslint configuration

  1. Vscode download eslint plug in
  2. NPM install – G eslint global install eslint
  3. Vscode user settings configuration( settings.json )
{
  //In order to comply with the principle of two spaces spacing of eslint 
  "editor.tabSize": 2,
  //Automatically repair format after saving
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "vue"
    "html",
    "vue"
  ]
}
  1. There are configuration files of eslint in the project, that is, the basic configuration of eslint can be used

setting.json

Partial setting settings

{
  "workbench.iconTheme": "vscode-icons",
  "workbench.colorTheme": "One Dark Pro",
  "explorer.confirmDelete": false,
  //Font settings
  "editor.fontFamily": "Fira Code",
  //Support for programming fonts
  "editor.fontLigatures": true,
  //In order to comply with the principle of two spaces spacing of eslint 
  "editor.tabSize": 2,
  //Turn off automatic file auto storage
  "files.autoSave": "off",
  //Automatically repair format after saving
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  //Reformat code using eslint rules
  "eslint.validate": [
    "javascript",
    "vue",
    "html",
    "vue"
  ],
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "aligned-multiple"
    },
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": false
    }
  }
}

Problem record

Left activity bar

The search button in the left activity bar is gone, file > Preferences > settings

//Controls whether the search function is displayed in the sidebar or panel area with larger horizontal space
  "search.location": "sidebar",

Recommended Today

Practice analysis of rust built-in trait: partialeq and EQ

Abstract:Rust uses traits in many places, from simple operator overloading to subtle features like send and sync. This article is shared from Huawei cloud community《Analysis of rust built-in trait: partialeq and EQ》Author: debugzhang Rust uses traits in many places, from simple operator overloading to subtle features like send and sync. Some traits can be automatically […]