“This is the 26th day of my participation in the August More Text Challenge.

Reasons for switching from vscode to webstorm

A Vue project that has been maintained for more than a year needs to be reconstructed. The directory structure of many files needs to be adjusted, but there are a lot of cross-references for each file. If the file location is modified, the mutual references of files should be modified.

In vscode, I move A file A, or change its name. Theoretically, the path to reference file A should change completely, but only partially.

This is not a problem when moving a location in WebStorm, webStorm refactoring is too stable, no matter what file is being moved, js, Vue, IMG, CSS, or change the file name, only other files are used, the path will be changed.

This was the main reason I moved to WebStorm.

Quick conversion from vscode to webstorm

Steps:

  1. Install WebStorm, download from the official website, 30 days trial
  2. Webstorm installs vscode keyboard shortcuts
  3. Install the theme
  4. Other Settings

Download and install trial

Download the latest version from the official website. Students can apply for a one-year trial, and github can also apply for a three-month trial if they submit a project. Download and install not to mention, both.

Webstorm installs vscode keyboard shortcuts

I have been using Vscode for over 2 years and almost all shortcut keys are yo-yo, so I plan to use the same shortcut for Webstorm. Step one, open itPreferencesMac open yesCommand+,

Step 2, download vscode keymap

The third step is application

And that’s set up. Here are the differences between shortcut keys

Shortcut key difference

After doing this, most of the shortcuts are the same, with some minor differences

Same shortcut key: (Windows has changed Command to CTRL)

  • The command + \ split screen
  • The command + f lookup
  • Command +shift+f Global search
  • Command +p opens the file
  • Command + Shift +p opens the command execution box
  • Alt + Shift +↓ Copies the current content to the next line
  • CTRL + ‘opens terminal

Different shortcuts:

  • Webstorm search and replace are separate
  • Commad +f command+shift+ F
  • The replacement is separate is the current file replacement is command+ Alt + F Global replacement iscommand+shitf+h

Webstorm installation theme

I used the one dark pro theme for vscode, which is consistent with webstorm

Step one, open itPreferencesMac open yesCommand+,

Step 2, download vscode keymap in plugins,

Step 3: Set the theme

Other Settings

Code formatting

Prettier I use vscode, webstorm, prettier dependency in my project, just go to webstorm and set “Command +” to turn on preferences

Interface localization

Command +, enable preferences, plugins to install a Chinese language package.

Project Settings

By default, webstorm double click to open the file, you can change it to webStorm. By default, the sidebar will not automatically jump to the selected file, you can change it

Webstorm is better than Vscode

Code refactoring

As mentioned above, changing the file name, moving the file location, updating references, 100% accuracy

Code to jump

Holding command on a component, function, or variable will redirect you to the function definition. Vscode sometimes fails to redirect, especially custom components in vue files

Code hinting

Webstorm will automatically spell check the code, check the code for errors, and tell you what’s wrong with the code.

Vscode requires a plug-in to be installed for code spelling checking

Webstorm does a uniform code check before git commits to help you find bugs that aren’t easy to spot, such as 400px missing a px

The advantages of Vscode

  • Light weight, quick to open
  • More than the theme
  • Multi-cursor feature, although WebStorm has it, butcommand+shift+iThe shortcut to add the cursor to each line is not available, only Command + D
  • More than a plug-in
  • Don’t money

At present, webstorm and vscode are used, if the same shortcut keys, use the same experience, but when reconstructing the code must choose webstorm.