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

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 文件结构弹出式菜单（查看代码结构）
如图：
(tip：图片点击可放大,方便移动端浏览)
alt+/ 代码补全
ctrl+F 搜索
ctrl+shift+F 按路径搜索
如图：
(tip：图片点击可放大,方便移动端浏览)
ctrl+R 替换
ctrl+shift+R 按路径替换
如图：
(tip：图片点击可放大,方便移动端浏览)
shift+F6 重命名
ctrl+W 选中单词
shift+tab/tab 减少/扩大缩进
ctrl+Y 删除一行
esc 进入代码编辑区域
alt+F1 查找代码在项目的具体某个位置在浏览器打开等等
如图：
(tip：图片点击可放大,方便移动端浏览)
ctrl+G 到指定行的代码
ctrl+F4 关闭当前代码选项卡

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

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

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

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

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

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

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

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

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

(tip：图片点击可放大,方便移动端浏览)

4.webstorm忽略node_module文件

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

(tip：图片点击可放大,方便移动端浏览)

4-2.全局设置：

(tip：图片点击可放大,方便移动端浏览)

5.建立vue模板文件

(tip：图片点击可放大,方便移动端浏览)
成功后的效果：

转载于:https://www.cnblogs.com/seven077/p/9771474.html