Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.
preface
👉 documents some useful WebStorm configurations
👉 continues to be updated…
WebStorm opens the project ignoring the node_modules directory Settings
When the project is slow to open, you can configure the option not to open the node_modules directory to open the project faster
Configuration path: File → Settings → Editor → File Types
WebStorm method for quickly locating open page directories
If you only know the name of the file, think of the exact location to find the file (if it is a devil level directory, this feature is simply moved to tears 🥶)
Dynamic effect show
WebStorm resolves Git conflicts
VCS → Git → Resolve conflicts
WebStorm opens Settings
① Configuration path: File → Settings
Set the shortcut keys Ctrl + Alt + S
WebStorm custom document comment templates
① Configuration path: File → Settings → Editor → Live Templates
② Locate the specified location to add the configuration
Such as the above configuration effect
If you want to set variables
The effect
WebStorm configures wechat WXSS style support
① Configuration path: File → Settings → Editor →File Types
② Find the place to add and enter the file suffix to support
Wechat *. WXSS Alipay *. AcssCopy the code
WebStorm compiles less and automatically generates CSS/WXSS/ACSS
Path: (1) configuration File | Settings | Tools | File which | +
② Configure the.css generated in the current directory (if it is wechat, change to.wxss, change to.acss in payment)
The Arguments: --no-color $FileName$$FileNameWithoutExtension$. WXSS # --no-color Disable color output # $FileName$current edit FileName # Output paths to refresh: $FileNameWithoutExtension$.css $FileNameWithoutExtension$. WXSS # Save in the current less directory and refresh the project structure to show the fileCopy the code🍇 If you want to generate the configuration to the specified folder
The Arguments: --no-color $FileName$ $ProjectFileDir$/pages/$FileDirPathFromParent(less)$/$FileNameWithoutExtension$.wxss # --no-color Disable colored output # $FileName$currently edited FileName # $ProjectFileDir$/pages/$FileDirPathFromParent(less)$/$FileNameWithoutExtension$.css /pages/ Find path to parent directory less in current directory/current edit file name remove. Less extension add. CSS extension Output paths to refresh: $ProjectFileDir$/pages/$FileDirPathFromParent(less)$/$FileNameWithoutExtension$.css # Save in the specified directory and refresh the project structure to display the fileCopy the code
🎨 [thumbs up] [concerns] don’t get lost, more front-end dry goods waiting for you to unlock
Phase to recommend
👉 applet template template usage details
👉 the most complete CSS shadow summary
👉 call you to learn JavaScript addition, subtraction, multiplication and division!
👉 simply say JavaScript depth copy!