webstorm快捷键、支持vue文件等部分使用技巧
转载: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 文件结构弹出式菜单(查看代码结构)
如图:
(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:图片点击可放大,方便移动端浏览)
成功后的效果:
webstorm快捷键、支持vue文件等部分使用技巧的更多相关文章
- Webstorm添加新建.vue文件功能并支持高亮vue语法和es6语法
转载:https://blog.csdn.net/qq_33008701/article/details/56486893 Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法 ...
- Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法
添加新建.vue文件功能 ①Webstorm 右上角File-Plugins 搜索vue如果没有就去下载 点击serch in repositories ②点击安装vue.js ③安装成功后点击右下角 ...
- Atom 编辑器安装 linter-eslint 插件,并配置使其支持 vue 文件中的 js 格式校验
安装方式有如下几种. 1.最常用的安装方式. # 进入atom插件文件夹 cd ~/.atom/packages/ # git clone 插件源文件 git clone https://github ...
- sublime text3支持Vue文件高亮显示
sublime text 默认打开.vue文件全部都是白色的,不是特别方便.安装插件可以做到代码高亮显示 1.插件vue-syntax-highlight 下载地址:github https://gi ...
- 让phpstorm 支持 vue文件并且语法高亮
1 安装 vue.js 插件 很遗憾,我的win版本没有支持的插件 2 修改文件类型 vue本质上还是html文件,包含了css html js,用html类型文件打开就可以 给html 文件添加 * ...
- webstorm中es6语法报错,.vue文件中es6语法报错
1.webstorm中es6语法报错,解决方法: 打开 Settings => Languages & Frameworks => Javascript把 Javascript L ...
- 如何优雅地使用 VSCode 来编辑 vue 文件?
最近有个项目使用了 Vue.js ,本来一直使用的是 PHPStorm 来进行开发,可是遇到了很多问题. 后来,果断放弃收费的 PHPStorm ,改用 vscode (Visual Stdio Co ...
- 优雅地使用 VSCode 来编辑 vue 文件
javascript visual-studio-code vue.js 当然 vscode 对 vue 也不是原生支持的,今天来扒一扒如何配置 vscode 以便优雅地编辑 vue 文件 先来扒一扒 ...
- webstorm添加*.vue文件代码提醒支持webstorm支持es6vue里支持es6写法
本文转自:http://www.lred.me/2016/01/07/webstorm%E6%B7%BB%E5%8A%A0-vue%E6%96%87%E4%BB%B6%E6%94%AF%E6%8C%8 ...
随机推荐
- QT之QCustomPlot(二)
怎么设置X,Y轴位置 Manages a single axis inside a QCustomPlot. Usually doesn't need to be instantiated exter ...
- 二:unittest框架配合selenium之xpath定位
刚开始学习selenium自动化测试时,犯了一个不该犯的错误,偷懒,使用火狐浏览器中的扩展FIREBUG,FIREPATH来辅助定位. 虽然用的定位方法大多数是使用XPATH方法,但是是工具定位出来的 ...
- python 多设备同时安装app包
python 多设备同时安装app包 上代码 #!/usr/bin/env python # -*- encoding: utf-8 -*- import os import time from m ...
- flask 的orm
https://www.cnblogs.com/chichung/p/9794702.html
- html01. <!DOCTYPE html>
解释 在HTML文档初,往往会有这么一句话<!DOCTYPE html>,它是html5标准网页声明,全称为Document Type HyperText Mark-up Language ...
- python:Django 简介。
Django是基Python的重要WEB框架. 1.安装Django Web框架 安装 pip 安装 在命令行模式 执行 [pip install django == 2.0]或者 [pip in ...
- Flask数据库的基本操作
Flask操作数据库基本操作 常用的SQLAlchemy字段类型 类型名 python中类型 说明 Integer int 普通整数,一般是32位 SmallInteger int 取值范围小的整 ...
- 第十八天:CSV、JSON、Excel、SQLite
一.CSV文件 1.读取 reader = csv.reader(打开的file对象), reader为可迭代对象 2.用namedtuple映射列名 with open('apple.csv') a ...
- 让微信小程序页面之间的通信不在变得困难
一个开始 小程序开发者总会碰到各种页面之间的通信问题,实现方式也五花八门,比如... 场景还原 首先这是一个电商小程序. 有这样一个需求: 首页某个地方要展示购物车商品数量. 当我在其他页面加购了商品 ...
- 一起感受HTML5和CSS3
Web设计师可以使用HTML4和CSS2.1完成一些很酷的东西.我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建内容丰富的网站.我们可以在不使用内联<font>和&l ...