Introduction to various configurations in WebStorm (picture)

The content of this article is about various setting methods (pictures) in WebStorm. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Theme Color

Theme Settings

Method: File -> Settings -> Appearance & Behavior -> Appearance ->Theme.

webstorm-setting-02.jpg

Color color setting

Method: File -> Settings -> Editor -> Colors & Fonts->Scheme. (Note: If you are a friend who transferred from Sublime text3 and prefer monokia color matching, you can refer to this article Webstorm Getting Started 1-Theme and Color Matching)

webstorm-setting-04.jpg

2. Open multiple projects

WebStorm can only open one project at a time by default. This is very annoying, but it can actually be set. (Note: If you build the project from the beginning and then configure it, remember to remove the root path shown on the left, otherwise it may not take effect even after clicking Add Content Root configuration)

Method: Add your current project directory in File -> Settings -> Directories -> Add Content Root.

webstorm-setting-01.jpg

3. Configure webserver options (port)

to facilitate access by other ip devices (Such as testing the effect on mobile phones)
Method: File -> Settings -> Build, Execution, Development -> Debugger ->port

# #webstorm-setting-05.jpg

4. Set the default encoding of the file

Method: File -> Settings -> Editor -> File Encodings -> IDE Encoding, Project Encoding.

(

Note: The page can be opened before and after configuration. The encoding is displayed in the lower right corner of the page. There is in the lower right corner of the screenshot below)

webstorm-setting-06.jpg

5. Shortcut key configuration

You can use the default shortcut key configuration, or you can choose according to your own style configuration. Those who are used to developing with eclipse and myeclipse can configure eclipse shortcut keys.

Method: File -> Settings -> Keymap-> Keymaps

##webstorm-setting-07.jpg

6. Emmet configuration, syntax, etc.

As mentioned above, shortcut keys are mentioned, and webstorm comes with the emmet plug-in. Anyone who has used zen coding should know that emmet is an upgraded version of zen coding. Of course, webstorm does not support all emmet syntax, but it is enough. You can refer to this article Enabling Emmet Support to see the specific situation.

As shown below, you can see that the browser manufacturer prefix is ​​automatically added to the css.

webstorm-setting-08.png

7. Line number, line break, reference line

After opening the page, Right-click on the left edge of the page, pop-up window options, check according to your needs, as shown below:

##webstorm-setting-09.png

8. Import and Export Configuration

When you need to use your own coding style on webstorm on other computers, import the configuration file and restart webstorm to take effect.

Export method: File -> Export Settings... ->Choose the options and path yourself. You can also use the default.

Import method: File -> Import Settings... ->Select the .jar file path.

9. Plug-in configuration

webstorm comes with many plug-ins, which you can configure according to your needs. I haven't used it yet, but if you do, you can refer to some of the articles below.

SVN, Git plug-in configuration, pre-compilation of CSS preprocessing language, JS real-time compression, etc. can refer to this article Webstorm Getting Started 2-Configuration

1. Friends who use css precompiler (sass, less) can save the front-end auxiliary tools such as gulp and grunt. Please refer to this article Webstorm Getting Started 5-Sass, scss, and less monitoring compilation

The above is the detailed content of Introduction to various configurations in WebStorm (picture). For more information, please follow other related articles on the PHP Chinese website!