Webstorm使用整理

Webstorm常用快捷键整理

1. ctrl + shift + n: 打开工程中的文件，目的是打开当前工程下任意目录的文件。
2. ctrl + j: 输出模板
3. ctrl + b: 跳到变量申明处
4. ctrl + alt + T: 围绕包裹代码(包括zencoding的Wrap with Abbreviation)
5. ctrl + []: 匹配 {}[]
6. ctrl + F12: 可以显示当前文件的结构
7. ctrl + x: 剪切(删除)行，不选中，直接剪切整个行，如果选中部分内容则剪切选中的内容
8. alt + left/right:标签切换
9. ctrl + r: 替换
10. ctrl + shift + up: 行移动
11. shift + alt + up: 块移动(if(){},while(){}语句块的移动)
12. ctrl + d: 行复制
13. ctrl + shift + ]/[: 选中块代码
14. ctrl + / : 单行注释
15. ctrl + shift + / : 块注释
16. ctrl + shift + i : 显示当前CSS选择器或者JS函数的详细信息
17. ctrl + '-/+': 可以折叠项目中的任何代码块，它不是选中折叠，而是自动识别折叠。
18. ctrl + '.': 折叠选中的代码的代码。
19. shift + esc: 当前激活的任意小窗口最小化，也可以是alt+数字键，数字在小窗口有显示。
20. alt + '7': 显示当前的函数结构。
21. 如果是*.html页面，则在文件名下的导航栏某DOM结构上右键，可以全选当前DOM结构。
22. 全局搜索 shift + shift
23. 全局文本搜索 ctrl + shift + f
24. ctrl + alt + 方向键 '<——' 或者 '——>' 回到之前访问的页面

辅助Webstorm解析Vue目录结构的脚本

Webstorm那些事 之 识别vue项目@根路径符号_crazy_jialin的博客-CSDN博客
jetbrains: webstorm如何识别webpack中的@等alias符号 - 简书 (jianshu.com)

//第一种自己配置
/** 
 该配置是给webstorm使用的,方便代码跳转  
 比如,@'/views/layout/components/DragBall'  
 ctrl + 鼠标左键 就可以跳转到代码的实现  
*/
const path = require('path')  
  
function resolve(dir) {  
 return path.join(__dirname, '.', dir)  
}  
  
module.exports = {  
 context: path.resolve(__dirname, './'),  
 resolve: {  
 extensions: ['.js', '.vue', '.json'],  
    alias:  {  
		 '@': resolve('src'),  
		      '@views': resolve('src/views'),  
		      '@comp': resolve('src/components'),  
		      '@core': resolve('src/core'),  
		      '@utils': resolve('src/utils')  
			} 
		  }
   }

//第二种 
const webpackConfig = require('@vue/cli-service/webpack.config.js')  
module.exports = webpackConfig