Why write this article?

In the company, only I use VSCode, while other colleagues use WebStorm. I also recommended VSCode to them. Although they were impressed, they felt it was troublesome to configure and did not want to spend time learning it. Furthermore, it is common to see various wechat groups asking VSCode how to configure the front-end development environment and so on, while most articles on nuggets are limited to recommending VSCode plug-ins. It’s up to me to create a comfortable front-end development environment for everyone.

To who? Want to switch from WebStorm to VSCode F2E

We are all coder, programming language is not high or low, editor /IDE, use your favorite.

Why VSCode?

“Microsoft has two kinds of software, one is VSCode and the other is something else.” Microsoft has done two important things in recent years (😄 I think the two biggest things), the launch of TypeScritp and the open source of VSCode.

  • Free open source

    Compared to WebStorm, this is much better, it is useless, and you don’t need to apply for the free version or buy it at your own expense.

  • Lots of plugins (only you can’t think of/find)

    This is both a strength and a weakness. Plugins, which means a lot of freedom, you can install as many plugins as you want. But for those unfamiliar with VSCode, it’s a disaster. It won’t work when installed, there are conflicts between plug-ins and so on.

  • lightweight

    VSCode is somewhere between an editor and an IDE, more powerful than notepad /SubLime Text and less bloated than WebStorm.

In addition, Utah has long recommended and switched to VSCode

Don’t crush?! Let’s start

This article is best eaten with MAC

Go ahead and download 🐶

Fairy directions

To solve terminal problems (make terminals more usable/attractive)

A big reason Windows users don’t want to use Windows is that terminals are too hard to use (even though there are a lot of new ones lately).

  • iTerm2

    Who uses who knows, be recommended rotten, not much force force, iTerm2

  • Oh My Zsh

    With TA, you can install any terminal theme you want

    I use this one

    You can see the current node version, git branches, and so on.

The plug-in

Mandatory plug-in installation is recommended

  • Chinese (Simplified) Language Pack for Visual Studio Code

    Don’t have to explain

  • Auto Close Tag

    Auto-close tags, such as < H1 >, will automatically fill in
    .

  • Auto Rename Tag

    Automatically renames labels, modifies start labels, and modifies end labels.

  • Bracket Pair Colorizer

    Rainbow 🌈 parentheses, very nice.

  • One Dark Pro

    One of my favorite themes. Very nice.

  • VSCode Great Icons

    File icon theme.

Then there are some utility plug-ins (on demand)

  • Live Server

    Previwe on Web Server can help you start a local Server or install Previwe on Web Server. Right-click the edit area to see Open With Live Server, or make a shortcut of your choice.

  • Markdown Preview Enhanced

    Markdown editor, just pretend.

  • GitLens + Git Graph

    GitLens lets you see who wrote every line of code, no ❌. Git Graph lets you see a graphical Git branch (click Git Graph in the lower left corner).

  • Code Runner

    You can run all kinds of code. There’s a run sign in the upper right corner when it’s installed.

  • Code Spell Checker

    There are wavy lines for misspelled words.

  • TODO HighLight

    Highlight TODO: and FIXME:, used with comments

  • Highlight Matching Tag

    After you double-click a label, it matches all the same labels to search for labels.

  • carbon-now-sh

    Generate nice code block images. Alt+Cmd+A or (Alt+Windows+A on Windows)

Snippet plug-in

  • JavaScript (ES6) code snippets

  • ES7+ React/Redux/React-Native snippets

  • Vetur + Volar

    Vue2 uses the former one and vue3 uses the latter one.

  • vscode-styled-components

  • any-rule

    Regular expression complete, right – click edit area can be.

Code validation/formatting

  • ESLint + TSLint

  • Prettier

    Beautify not recommended (garbage 🌶️)

Commonly used plug-ins on projects

  • Version Lens

    Lets you see a detailed version of each dependency. Click “V” in the upper right corner.

  • element-ui-helper

  • Remote – SSH + Remote – SSH: Editing Configuration Files

    The deployment project is mandatory. These two plugins allow you to open the remote server directly in VSCode (you can copy and paste the files in VSCode, or modify the code directly in VSCode on the server, or open the terminal using VSCode). What xshell, XFTP, Mob, FinalShell, Windterm, Securecrt, Tabby, built-in terminal… All too weak, to Lao Tze dead 🐶

configuration

Here is my VSCode configuration. Command+Shift+P or (Ctrl+Shift+P on Windows) opens setting.json

I’ve configured it to save and format it according to the rules I want

{
  "files.autoSave": "off".// Automatically save

  "editor.formatOnSave": true.// Save formatting
  "editor.defaultFormatter": "esbenp.prettier-vscode".// Default formatter
  "editor.fontSize": 16./ / size
  "editor.tabSize": 2.// a TAB is cast to 2 Spaces
  "editor.fontFamily": "Input Mono, Fira Code, monospace"./ / font
  "editor.smoothScrolling": true.// Enable animation while scrolling
  "editor.renderWhitespace": "all".// Whitespace display mode
  "editor.quickSuggestions": {
    "strings": true // Enable suggestions when typing a string
  },
  "editor.wordWrap": "on".// Wrap a line at the viewport width

  "explorer.confirmDragAndDrop": true.// Controls whether to confirm dragging and dropping to move files or folders in Explorer

  "workbench.colorTheme": "One Dark Pro"./ / theme
  "workbench.iconTheme": "vscode-great-icons".// File subject
  "workbench.tree.indent": 16./ / tree indentation

  "terminal.integrated.defaultProfile.windows": "PowerShell".// Default terminal
  "terminal.integrated.defaultProfile.osx": "zsh".// Default terminal
  "terminal.integrated.copyOnSelection": true.// Terminal select replication
  / / "terminal. Integrated. FontSize" : 16, / / terminal font size

  "breadcrumbs.enabled": true.// Enable vscode file path navigation

  "security.workspace.trust.untrustedFiles": "prompt".// Do not display the trust introduction prompt

  / / set prettier
  "prettier.semi": false.// Set the semicolon
  "prettier.singleQuote": true.// Enforce single quotes
  "prettier.trailingComma": "none".// Do not add commas anytime
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "javascript.updateImportsOnFileMove.enabled": "always".// updated 2022-03-14 00:43
  // https://github.com/antfu/vscode-file-nesting-config
  // Categorize configuration files
  "explorer.experimental.fileNesting.enabled": true."explorer.experimental.fileNesting.expand": false."explorer.experimental.fileNesting.patterns": {
    "*.js": "$(capture).js.map, $(capture).min.js, $(capture).d.ts"."*.jsx": "$(capture).js"."*.module.ts": "$(capture).resolver.ts, $(capture).controller.ts, $(capture).service.ts"."*.ts": "$(capture).js, $(capture).*.ts"."*.tsx": "$(capture).ts"."*.vue": "$(capture).*.ts, $(capture).*.js".".env": "*.env, .env.*, env.d.ts".".gitignore": ".gitattributes, .gitmodules, .gitmessage, .mailmap, .git-blame*"."index.d.ts": "*.d.ts"."package.json": ".browserslist*, .circleci*, .codecov, .commitlint*, .editorconfig, .eslint*, .firebase*, .flowconfig, .github*, .gitlab*, .gitpod*, .huskyrc*, .jslint*, .lintstagedrc*, .markdownlint*, .mocha*, .node-version, .nodemon*, .npm*, .nvmrc, .pm2*, .pnp.*, .pnpm*, .prettier*, .releaserc*, .sentry*, .stackblitz*, .styleci*, .stylelint*, .tazerc*, .textlint*, .tool-versions, .travis*, .vscode*, .watchman*, .xo-config*, .yamllint*, .yarnrc*, api-extractor.json, apollo.config.*, appveyor*, ava.config.*, azure-pipelines*, bower.json, build.config.*, commitlint*, crowdin*, cypress.json, dangerfile*, dprint.json, firebase.json, grunt*, gulp*, jasmine.*, jenkins*, jest.config.*, jsconfig.*, karma*, lerna*, lint-staged*, nest-cli.*, netlify*, nodemon*, nx.*, package-lock.json, playwright.config.*, pm2.*, pnpm*, prettier*, pullapprove*, puppeteer.config.*, renovate*, rollup.config.*, stylelint*, tsconfig.*, tsdoc.*, tslint*, tsup.config.*, turbo*, typedoc*, vercel*, vetur.config.*, vitest.config.*, webpack.config.*, workspace.json, xo.config.*, yarn*"."vite.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .htmlnanorc*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, cssnano.config.*, cypress.json, env.d.ts, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, playwright.config.*, postcss.config.*, puppeteer.config.*, svgo.config.*, tailwind.config.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*"."vue.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .htmlnanorc*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, cssnano.config.*, cypress.json, env.d.ts, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, playwright.config.*, postcss.config.*, puppeteer.config.*, svgo.config.*, tailwind.config.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*"}}Copy the code

VSCode snippets

Right-click the Settings icon in the lower left corner and select the user code snippet. Create xxx.json for code snippets in XXX format.

Using the.vue file as an example, I want to set the following code snippet:

Open up vue.json, open up here

Copy the snippet into your snippet, TAB trigger whatever shorthand you want, and it’s done

Next copy snippet to vue.json

Enter vue2 in the.vue file to appear

The last

There’s nothing stopping you from switching to VSCode?