52webStorm、VSCode用法

一、webStorm设置

1、Ctrl+滚轮:放缩字体大小

file----setting----editor----general----(勾选)change font size (zoom) with ctrl+mousewheel----(点击)OK

2、去掉右侧竖线

file----setting----editor----general----appearance----show right margin (configured in code style options)

3、设置字体大小(Consolas, 'Courier New', monospace)

file----setting----editor----color&font----font

4、创建文件名后缀

file----new----edit file templates...----(点击)+----Name(任意填),Extension(填后缀名)----(点击)OK

5、webstorm设置ES6

file----setting----languages&frameworks----javascirpt----templates----language for comments----ECMAscript6----(点击)OK

6、设置快捷键

file----setting----editor----live templates----(点击右侧)+----(点击)1.live templates

7、取消撤销: ctrl + shift + z (使用前需要把搜狗输入法调至英文输入状态)

8、Ctrl+Alt+L:格式化代码

9、Ctrl+N:搜索类

10、Ctrl+H:查看类继承关系

11、Ctrl+Shift+N:按文件名搜索

12、Alt+F7:查找函数或变量在哪被使用

13、Shift+Shift:(A)类,文件,配置项,快捷键,函数,路径等等都能搜索。(B)搜索时,搜索字符串带/就可以搜索路径了

14、WebStorm手机端页面适配快捷键

(1)输入: meta:vp

(2)再按tab键就出来了.

(3)这行代码,会将HTML5自动适配成手机端页面

15、常用快捷键,https://www.cnblogs.com/wanglexueshilengde/p/8390730.html

16、设置自定义代码块:file--setting--editor--live template--"+"

17、WebStorm更换背景颜色的方法:file--setting--Appearance & Behavior--Appearance--点击下拉箭头--选择--OK

18、webstorm代码冲突解决

```javascript

<<<<<<< HEAD

本地向服务器提交的内容(我写的)

=======

服务器下载到本地的内容(人家写的)

>>>>>>> b0ef58d69851fedad4169878a62033c0ce16246c

```

19、WebStrom Live Template 建代码块

来源:https://blog.csdn.net/liangrongliu1991/article/details/79626960

1、File—editor—live templates—javascript,+,abbreviation:(简写代码,比如ccc),templates text: (详写代码,比如console.log()),define(勾选,比如javascript,typescript),apply,ok

二、VSCode设置

1、VSCode关闭右侧预览功能

file----preference----setting----搜索"editor.minimap.enabled"

2、VSCode修改字体大小

file----preference----setting----Font Zize

3、VSCode修改字体

file----preference----setting----Font Family

4、vscode设置颜色主题

file----preference----Color Theme

5、vscode同时打开多个文件

单击:新的文件覆盖旧文件

双击:新的文件不会覆盖旧文件

6、VSCode设置成中文语言环境

打开vscode =>Ctrl+Shift+p=>configure display language=>确定=>“locale”:“zh-CN”=>重启vscode工具=>商店(最左侧最下方图标)=>Chinese(Simplied) Lang=>安装。

7、VSCode菜单栏隐藏与显示

隐藏:查看=>切换菜单栏

显示:ctrl+shift+p=> view:toggle menu bar

8、VSCode活动栏隐藏与显示

隐藏:右键资源管理器=>隐藏活动栏

显示:查看——外观——显示活动栏

左右切换:右键资源管理器=>将侧边栏移到左/右侧

9、vscode 自动折行

文件=>首选项=>设置=>on(editor:word wrap)

10、VSCode改左侧窗口字体大小

在vscode安装目录下:C:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench

找到workbench.main.css文件,打开并找到“.part>.content{font-size:”进行修改

11、vs code预览

安装view in browser--右键html--点击view in browser

12、vscode 快速生成html

点击新建文件--命名1.html--在空html中输入"!"--按下tab键。

13、vscode 修改选项卡字体

在vscode安装目录下:C:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench

找到workbench.main.css文件,打开并找到“.title .title-label a{text-decoration:none;font-size:”进行修改

14、VSCode滚轮改变字体大小

file----preference----setting----搜索"mouseWheelZoom"(单词之间没有空格)----勾选

15、vscode设置缩进2个空格

file----preference----setting----Editor:Tab Size----2

16、vscode设置选项卡高度

在vscode安装目录下:C:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench

找到workbench.main.css文件,打开并找到下列三项,进行设置。

.title .editor-actions{cursor:default;flex:initial;padding-left:4px;height:

.tab{position:relative;display:flex;white-space:nowrap;cursor:pointer;height:

.title .tabs-container{display:flex;height:

17、Visual Studio Code修改颜色主题

文件——首选项——颜色主题;

18、vscode如何用谷歌浏览器预览html文件

(1)安装“view in browser”

(2)安装“open in browser”

(3)文件---首选项---设置---输入"open-in-browser.default"---“Chrome”

(4)右键“x.html”---“Open in Default Browsers”

19、VS Code中怎么运行js文件

(1)安装插件code runner

(2)安装node环境

(3)F5

三、vscode快捷键

来源:https://www.cnblogs.com/weihe-xunwu/p/6687000.html

1、注释:

  a) 单行注释:[ctrl+k,ctrl+c] 或 ctrl+/

  b) 取消单行注释:[ctrl+k,ctrl+u] (按下ctrl不放,再按k + u)

  c) 多行注释:[alt+shift+A]

  d) 多行注释:/**

2、移动行:alt+up/down

3、显示/隐藏左侧目录栏 ctrl + b

4、复制当前行:shift + alt +up/down

5、删除当前行:shift + ctrl + k

6、控制台终端显示与隐藏:ctrl + ~

7、查找文件/安装vs code 插件地址:ctrl + p

8、代码格式化:shift + alt +f

9、新建一个窗口 : ctrl + shift + n

10、行增加缩进: ctrl + [

11、行减少缩进: ctrl + ]

12、裁剪尾随空格(去掉一行的末尾那些没用的空格) : ctrl + shift + x

13、字体放大/缩小: ctrl + ( + 或 - )

14、拆分编辑器 : ctrl + 1/2/3

15、切换窗口 : ctrl + shift + left/right

16、关闭编辑器窗口 : ctrl + w

17、关闭所有窗口 : ctrl + k + w

18、切换全屏 : F11

19、自动换行 : alt + z

20、显示git : ctrl + shift + g

21、全局查找文件:ctrl + shift + f

22、显示相关插件的命令(如:git log):ctrl + shift + p

23、选中文字:shift + left / right / up / down

24、折叠代码: ctrl + k + 0-9 (0是完全折叠)

25、展开代码: ctrl + k + j (完全展开代码)

26、删除行 : ctrl + shift + k

27、快速切换主题:ctrl + k / ctrl + t

28、快速回到顶部 : ctrl + home

29、快速回到底部 : ctrl + end

30、格式化选定代码 :ctrl + k / ctrl +f

31、选中代码 : shift + 鼠标左键

32、多行同时添加内容(光标) :ctrl + alt + up/down

33、全局替换:ctrl + shift + h

34、当前文件替换:ctrl + h

35、打开最近打开的文件:ctrl + r

36、打开新的命令窗:ctrl + shift + c

37、函数代码块的注释生成方法:安装插件“Document This”;将光标放置于function上面,快捷键Ctrl+Alt+D;

猜你喜欢

转载自blog.csdn.net/bao13716164418/article/details/91794110
52