Select reason

  1. Lightweight and powerful code editing capabilities
  2. A rich plug-in ecosystem

download

  • Official website to download code.visualstudio.com/Download
  • The version in the folder is 1.58.2
  • Everything in this article was tried on version 1.58.2

The installation

Foolproof installation, the next step is the next step

Introduction to the VScode panel

Five buttons on the left

  1. The editor can now open multiple files at the same time
  2. Global search
  3. Git manager, very easy to use, conflict resolution what is very convenient
  4. debug
  5. Plug-in search installation, VScode provides a very large number of plug-ins

The configuration file

Basic setup

How to open: File preferences Settings

  • You can choose to configure
  • You can modify the default configuration by editing the setting.json file
  • Here is my configuration file

{/ / documentation highlighting, cooperate with HTML Snippets plug-in "files. Associations" : {" *. Vue ":" vue, "" *. Wpy" : "vue," "*. WXML" : "HTML", "*. WXSS" : "css" }, "emmet.showAbbreviationSuggestions": true, "emmet.showExpandedAbbreviation": "always", "emmet.includeLanguages": { "vue-html": "html", "vue": "html", "wpy": "HTML"}, // Do you need to confirm "explorer.confirmDelete": false, // Text size "editor.fontSize": 14, "window.zoomlevel ": 1, "editor.wordWrap": "on", // Automatic save after losing focus "files.autoSave": "onFocusChange", // Automatic formatting every time save; "Editor. formatOnSave": false, // show one line every 120 lines." Editor. rulers": [], // Exclude these folders/files when using the search function. "search. Exclude ": { "**/node_modules": true, "**/bower_components": true, "**/target": true, "**/logs": True,} / / that the documents will not be displayed in the workspace "files. Exclude" : {". * * / git ": true," * * /. SVN ": true," * * /. Hg ": true," * * / CVS ": True, "* * / DS_Store" : true, "* * *. / js" : {" when ":" $(the basename). Ts "/ / ts compiled the generated js file will not be displayed in the working air}," * * / node_modules ": true }, "beautify.language": { "js": { "type": ["javascript", "json"], "filename": [".jshintrc", ".jsbeautifyrc"] }, "css": ["css", "less"], "html": ["htm", "html"], "beautify.config": {"brace_style":"collapse,preserve-inline", "indent_size": 4}}, // Default Google browse "view-in-browser.custombrowser ": "Chrome", / / vscode is enabled by default automatically set depending on the type of file tabsize options "editor. DetectIndentation" : false, "tabnine. ExperimentalAutoImports" : Fileheader. customMade: {"author":"yangfeng", "date":"", "description":"}, // function annotation "fileheader.cursorMode": {"author":"yangfeng", "description":"", "param":"", "return":"}, // Todo highlight with plugin using "todohighlight. IsEnable ": true, "gitlens.advanced.messages": { "suppressGitMissingWarning": true }, "editor.wordSeparators": "`~! @ # $% ^ & * () = + [{]} \ |; : "",. < > /?" , "the workbench. Editor. EnablePreview" : false, / / open the file does not cover "eslint. AutoFixOnSave" : True, / / each time you save the code by eslint format repair "prettier. EslintIntegration" : True, // Let Prettier use ESLint's code format for validation // Add vue support for "eslint.validate": ["javascript", "javascriptreact", {"language": "Vue ", "autoFix": true}], // # prettier.semi: false, # prettier.singleQuote": True, / / # let function (name) and add a space between the brackets behind the "javascript. The format. InsertSpaceBeforeFunctionParenthesis" : True, / / # of vue js according to the editor's own ts format to format "vetur. Format. DefaultFormatter. Js" : "vscode-typescript", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "Force - aligned" / / # vue components in HTML code formatting style}}, / / rename or move a file, enable or disable the automatic update import path "javascript. UpdateImportsOnFileMove. Enabled" : "Always", / / enable/disable the navigation path "breadcrumbs. Enabled" : true, / / CMD terminal type "terminal. Integrated. FontSize" : 16, // Editor initial interface "workbench.startupEditor": "NewUntitledFile", / / workbench status bar is visible "workbench. The statusBar. Feedback. Visible" : false, / / add multiple cursor when need shortcuts "editor. MultiCursorModifier" : "ctrlCmd", / / custom code fragment shows the location of the "editor. SnippetSuggestions" : "Top ", // When enabled, press TAB to expand the Emmet abbreviation. "Emmet. TriggerExpansionOnTab" : true, / / control editor on the blank characters display symbols way "editor. RenderWhitespace" : "All", / / control editor should render whitespace "editor. RenderControlCharacters" : false, / / display error and warning on files and folders ". The problems decorations. Enabled ": False, // HTML file formatter "[HTML]": {"editor.defaultFormatter": "Vscode.html-language-features ", "editor.codeActionsOnSave": {// Disable ESlint from verifying HTML "source. fixall. eslint": "Source. fixall. stylelint": false}}, "editor.codeActionsOnSave": Eslint ": true, // Enable stylelInt automatic repair when saving files "source.fixall. stylelint": true }, "stylelint.config": { "extends":"./.stylelintrc" }, "stylelint.enable":true }Copy the code

Will install the plugin

Installation method: search for plug-in installation — > Install — > restart the editor

English is not good, so the first step to install software is to set up in Chinese

Vue related plug-ins

vetur

  • Vue related syntax highlighting, intellisense,.vue files highlighting

VueHelper

  • Js file, vue life cycle, related attributes are automatically completed

ESLint

  • Plug-in installation
  • Front-end install takes effect after

StyleLint

  • Refer to Wang Jing’s configuration file
  • You don’t have to add the js suffix

Set the class to be able to double-click selected, hold down CTRL click to adjust the corresponding page

View In Browser

Add different colors to Bracket (Bracket Pair Colorizer)

  • Very easy to find JS blocks

Auto Rename Tag Matching

  • When you modify an HTML tag, the end tag automatically changes

Path Intellisense

Markdown Preview (MarkDown Preview)

Check whether Spaces are consistent (indent-rainbow)

  • Spaces that are not multiples of 4 are marked red

Code runner

  • You can allow certain lines of code to be very useful

The code automatically matches, indicating the most recently used method first (Tabnine)

Generated file Remarks (koroFileHeader ）

NPM module import prompt (NPM Intellisense)

Highlighting the TODO (TODO Highlight ）

  • // TODO: a colon is required

shortcuts

  1. CTRL + Enter reopens a line down; CTRL + Shift + Enter reopens a row on the previous row

  2. CTRL + X cut a line; CTRL + Shift + K deletes a row

  3. Move a row: Alt + ↑ Move up a row. Alt + ↓ Move a row down

  4. To copy a row: Shift + Alt + ↓ To copy a row down. Shift + Alt + ↑ Copy a row up

  5. CTRL + Z Rollback

  6. CTRL + F: Search

  7. CTRL + Alt + F: Replace

  8. CTRL + Shift + F: Search within the project

  9. Ctrl+P quickly opens the recently opened file

  10. Ctrl+Shift+N opens a new editor window

  11. Ctrl+Shift+W closes the editor

  12. Ctrl + Shift + [Fold area code

  13. Ctrl + Shift +] expands the area code

  14. Ctrl + / Add close line comment

  15. Shift + Alt +A block area comment

  16. CTRL + K + 0 collapses all code blocks

  17. CTRL + K + J expands all code blocks

The plug-in

Turbo Console Log (One-click Comment/Enable/Delete all console.log)

  1. CTRL + Alt + L After selecting the variable, use this shortcut to generate console.log
  2. Alt + Shift + C comment all console.log
  3. Alt + Shift + u Enable all console.log
  4. Alt + Shift + d deletes all console. logs

(2, 3, 4 only for console.log created using 1)