webstorm快捷键、支持vue文件等部分使用技巧

ゝ一世哀愁。 2023-06-01 03:21 2阅读 0赞

## [转载：https://www.cnblogs.com/seven077/p/9771474.html][https_www.cnblogs.com_seven077_p_9771474.html] ##

# #

## 1.常用快捷键 ##

shift+↑ 向上选取代码块  
shift+↓ 向下选取代码块  
ctrl+/ 注释/取消注释的行注释  
ctrl+alt+L 格式化代码  
tab,shift+tab 调整缩进  
ctrl+shift+V 从剪贴板里选择粘贴  
ctrl+D 复制代码副本  
shift+delete 删除当前行  
ctrl+shift+U 大小写转换  
alt+←,alt+→ 左右切换选项卡  
ctrl+B 跳转到变量声明处  
ctrl+F12 文件结构弹出式菜单（查看代码结构）  
如图：  
![clipboard.png][](tip：图片点击可放大,方便移动端浏览)  
alt+/ 代码补全  
ctrl+F 搜索  
ctrl+shift+F 按路径搜索  
如图：  
![2.png][](tip：图片点击可放大,方便移动端浏览)  
ctrl+R 替换  
ctrl+shift+R 按路径替换  
如图：  
![3.png][](tip：图片点击可放大,方便移动端浏览)  
shift+F6 重命名  
ctrl+W 选中单词  
shift+tab/tab 减少/扩大缩进  
ctrl+Y 删除一行  
esc 进入代码编辑区域  
alt+F1 查找代码在项目的具体某个位置 在浏览器打开 等等  
如图：  
![4.png][](tip：图片点击可放大,方便移动端浏览)  
ctrl+G 到指定行的代码  
ctrl+F4 关闭当前代码选项卡

## 2.支持类：各种类型文件vue、php、es6语法等 ##

支持vue文件类型、语法高亮及提示

### 2-1.支持vue语法提示： ###

安装vue插件：  
![5.png][](tip：图片点击可放大,方便移动端浏览)  
成功后的效果：  
![6.png][](tip：图片点击可放大,方便移动端浏览)

### 2-2.vue文件被编辑器识别（应用主题）： ###

![7.png][](tip：图片点击可放大,方便移动端浏览)  
php文件识别也是同样的方法设置，这里不再赘述。  
2-3.支持es6语法  
![8.png][](tip：图片点击可放大,方便移动端浏览)

### 2-4.编辑器中vue文件里面支持sass： ###

![9.png][](tip：图片点击可放大,方便移动端浏览)  
如图：直接src引入或加上type=”text/scss”

## 3.编辑器里面添加多个项目 ##

![10.png][](tip：图片点击可放大,方便移动端浏览)

## 4.webstorm忽略node\_module文件 ##

### 4-1.针对文件夹单独设置： ###

![11.png][](tip：图片点击可放大,方便移动端浏览)

### 4-2.全局设置： ###

![12.png][](tip：图片点击可放大,方便移动端浏览)

## 5.建立vue模板文件 ##

![13.png][](tip：图片点击可放大,方便移动端浏览)  
成功后的效果：  
![14.png][]

转载于:https://www.cnblogs.com/Jeely/p/11269800.html

[https_www.cnblogs.com_seven077_p_9771474.html]: https://www.cnblogs.com/seven077/p/9771474.html
[clipboard.png]: http://aniublog.com/wp-content/uploads/2018/05/clipboard.png
[2.png]: http://aniublog.com/wp-content/uploads/2018/05/2.png
[3.png]: http://aniublog.com/wp-content/uploads/2018/05/3.png
[4.png]: http://aniublog.com/wp-content/uploads/2018/05/4.png
[5.png]: http://aniublog.com/wp-content/uploads/2018/05/5.png
[6.png]: http://aniublog.com/wp-content/uploads/2018/05/6.png
[7.png]: http://aniublog.com/wp-content/uploads/2018/05/7.png
[8.png]: http://aniublog.com/wp-content/uploads/2018/05/8.png
[9.png]: http://aniublog.com/wp-content/uploads/2018/05/9.png
[10.png]: http://aniublog.com/wp-content/uploads/2018/05/10.png
[11.png]: http://aniublog.com/wp-content/uploads/2018/05/11.png
[12.png]: http://aniublog.com/wp-content/uploads/2018/05/12.png
[13.png]: http://aniublog.com/wp-content/uploads/2018/05/13.png
[14.png]: http://aniublog.com/wp-content/uploads/2018/05/14.png