webstorm的中文教程和技巧分享

article/2025/1/10 3:04:58

webstorm是一款前端javascript开发编辑的神器,此文介绍webstorm的中文教程和技巧分享。

webstorm8.0.3中文汉化版下载:
百度网盘下载:http://pan.baidu.com/s/1pJI9PMV

WebStorm为前端javascript开发而生,专门为 javascript开发做了很多优化,令前端工程师眼前一亮的。

一、webstorm的功能

1、webstorm的智能的代码补全:

支持不同浏览器的提示,还包括所有用户自定义的函数(项目中)

WebStorm的智能的代码补全
WebStorm的智能的代码补全

代码补全包含了所有流行的库,比如:JQuery, YUI, Dojo, Prototype, Mootools and Bindows。

2、webstorm代码格式化:

代码不仅可以格式化,而且所有规则都可以自己来定义:

webstorm代码格式化

3、代码编写中的html提示:

大家经常在js代码中编写html代码,一般来说十分痛苦,不过有了智能提示,就爽多了。

webstorm代码编写中的html提示

而且html里面还能有js提示

webstorm

4、代码导航和用法查询:

只需要按着Ctrl键点击函数或者变量等,就能直接跳转到定义:

可以全项目查找函数或者变量,还可以查找使用并高亮:

webstorm-前端javascript开发神器

5、代码重构(这个操作有些像Resharper,熟悉Resharper的用户应该上手很快):

支持的有重命名、提取变量/函数、内联变量/函数、移动/复制、安全删除等等,比如:

webstorm-前端javascript开发神器中文教程和技巧分享

内联变量重构之后变为:

webstorm-前端中文教程和技巧分享

6、代码检查和快速修复:

 

可以快速找到代码中的错误或者需要优化的地方,并给出修改意见,快速修复。

 

7、webstorm代码调试:

8、代码结构浏览:

可以快速浏览和定位

9、代码折叠:

10、包裹或者去掉外围代码:

去掉之后就成了:



二、webstorm常用快捷键

查找/代替

快捷键

说明

ctrl+shift+N通过文件名快速查找工程内的文件(必记)
ctrl+shift+alt+N通过一个字符快速查找位置(必记)
ctrl+F在文件内快速查找代码
F3查找下一个
shift+F3查找上一个
ctrl+R文件内代码替换
ctrl+shift+R指定目录内代码批量替换
ctrl+shift+F指定目录内代码批量查找
ctrl+R文件内代码替换

界面操作

快捷键

说明

ctrl+shift+A快速查找并使用编辑器所有功能(必记)
alt+[0-9]快速拆合功能界面模块
ctrl+shift+F12最大区域显示代码(会隐藏其他的功能界面模块)
alt+shift+F将当前文件加入收藏夹
ctrl+alt+s打开配置窗口
ctrl+tab切换代码选项卡(还要进行此选择,效率差些)
alt+<-或->切换代码选项卡
ctrl+shift+N通过文件名快速查找工程内的文件(必记)
ctrl+shift+alt+N通过一个字符快速查找位置(必记)
ctrl+F在文件内快速查找代码
F3查找下一个
shift+F3查找上一个
ctrl+R文件内代码替换
ctrl+shift+R指定目录内代码批量替换
ctrl+shift+F指定目录内代码批量查找
ctrl+R文件内代码替换

懒人建站http://www.51xuediannao.com/

快捷键

说明

ctrl+shift+A快速查找并使用编辑器所有功能(必记)
alt+[0-9]快速拆合功能界面模块
ctrl+shift+F12最大区域显示代码(会隐藏其他的功能界面模块)
alt+shift+F将当前文件加入收藏夹
ctrl+alt+s打开配置窗口
ctrl+tab切换代码选项卡(还要进行此选择,效率差些)
alt+<-或->切换代码选项卡
ctrl+F4关闭当前代码选项卡

代码编辑

快捷键

说明

ctrl+D复制当前行
ctrl+W选中单词
ctrl+<-或->以单词作为边界跳光标位置
alt+Insert新建一个文件或其他
ctrl+alt+L格式化代码
shift+tab/tab减少/扩大缩进(可以在代码中减少行缩进)
ctrl+Y删除一行
shift+enter重新开始一行(无论光标在哪个位置)

导航

快捷键

说明

esc进入代码编辑区域
alt+F1查找代码在其他界面模块的位置,颇为有用
ctrl+G到指定行的代码
ctrl+]/[光标到代码块的前面或后面
alt+up/down上一个/下一个方法

建议配置版本控制快捷键

快捷键

说明

ctrl+C提交代码
ctrl+p向远程版本库推送更新
ctrl+G到指定行的代码
ctrl+]/[光标到代码块的前面或后面
alt+up/down上一个/下一个方法


webstorm8.0.3中文汉化版下载:
百度网盘下载:http://pan.baidu.com/s/1pJI9PMV

转载于:https://www.cnblogs.com/justuntil/p/6260656.html


http://chatgpt.dhexx.cn/article/uDSNDU7t.shtml

相关文章

IDEA-goland-pychar-phpstorm-webstorm设置中文版

以前都是需要手动安装破解包 , 达到中文的效果,但是设置等操作是不可用的 现在只需要(ctrlalts)打开设置 在plugin中输入chiness , 然后重启idea即可

Webstorm中文乱码的问题

2019独角兽企业重金招聘Python工程师标准>>> Webstorm中文乱码的问题 1、设置中文字体 2、设置文件编码集&#xff08;1&#xff09; 3、设置文件编码集&#xff08;2&#xff09; 转载于:https://my.oschina.net/u/2441766/blog/856200

php代码丑,解决webstorm显示中文难看、丑的问题

相信用过sublime、atom 类的编辑器的童鞋&#xff0c;装完webstorm对这款编辑器的第一印象是没啥好感的。一个很重要的原因就因为第一眼看上去这款IDE默认主题界面不好看&#xff0c;最不能忍的是中文显示太难看&#xff0c;中文显示的有粗有细&#xff0c;有些中文显示会有锯齿…

webstorm中文乱码问题

步骤&#xff1a; 1、ctrlshifts 2、选择Editor----->File Encoding 3、

Webstorm的介绍

WebStorm 是什么&#xff1f;&#xff1f; WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、 “最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源&#xff0c;继承了IntelliJ IDEA强大的JS部分…

【webstorm】webstorm官网中文破解版

转载地址&#xff1a;https://blog.csdn.net/vchen_hao/article/details/77248053 1.下载webstorm软件。 1.官网下载 https://www.jetbrains.com/webstorm/ 2.百度云盘下载 链接&#xff1a;链接: https://pan.baidu.com/s/1kXimplP 密码: av6g 2.安装。 1、运行“WebStorm-20…

WebStorm设置中文,没有显示安装官方插件来这

一、直接访问 Versions: Chinese (Simplified) Language Pack / 中文语言包 - IntelliJ IDEs Plugin | Marketplace (jetbrains.com) 下载 二、使用步骤 1.选择WebStorm 2.打开WebStrom 就会提示你是否下载中文包了 总结 这是在webstorm里面没有搜到中文包的步骤&#xff0c…

WebStorm中文乱码解决代码

<meta http-equiv"Content-Type" content"text/html;charsetutf-8"> 以上这张图是我用HTML方式写的一张简历,好,现在运行 大家看,我运行起来的这个代码,在页面中已经中文乱码了,这个问题之前一直困扰着我,前几天刚刚得到了解决方法,现在分享给大家. …

webstorm控制台中文乱码解决

webstorm控制台中文乱码解决 点击这里&#xff0c;会打开一个配置文件&#xff0c;在最下面加一行代码 -Dfile.encodingutf-8再重启webstorm就ok了

webstorm设置中文界面

打开setting-plugins&#xff0c;搜索Chinese&#xff0c;下载选中的那个插件&#xff0c;下载完成启用之后重启webstorm即可

WebStorm设置中文,直接安装官方插件

菜单栏 File -> Settings 进入设置页面。Plugins内搜索chinese中文语言包插件安装完毕重启WebStorm

WebStorm 2023 下载、安装、汉化

1. 下载WebStorm 1.1. 官网下载地址 https://www.jetbrains.com/webstorm/https://www.jetbrains.com/webstorm/download/download-thanks.html1.2. 官网介绍 WebStorm是一个用于JavaScript和相关技术的集成开发环境。与其他JetBrains IDE一样&#xff0c;它使您的开发体验更…

C语言图形库的问题

C语言图形库 源文档 &#xff1a;https://blog.csdn.net/weixin_44690490/article/details/100633283 谈一下easyx库里处理图片的问题 用图形处理输出图像 我按照作者的方式但是结果不行&#xff0c;如图

【C语言】TC2.0环境-带图形库

目录 1. 下载2. 编译一个图形程序2.1. 解压2.2. 打开虚拟DOS2.3. 设置盘映射到DOSbox中2.4. 进入TC2.0安装目录2.5. 打开源代码2.6. 设置TC.EXE路径2.7. 编译2.8. 链接2.9. 运行2.10. 运行结果 1. 下载 链接&#xff1a;https://pan.baidu.com/s/18lG_eWWURHNjagklmxfnmA 提取…

C语言基于ege图形库的图片碰撞检测

WSAD移动 有碰撞的话会显示一个原点 我用的是两张80*80的图片 用其他的图片的话自己改代码 把图片改名成1.png和 2.png 就是这两张图片 #include<graphics.h> #include<windows.h> #include<stdio.h> int xx,yy; int wanjiax20,wanjiay120; SMALL_RECT z,f,…

【精选】各种节日祝福(C语言,可修改),Easyx图形库应用+源代码分享

博主&#xff1a;命运之光✨✨ 专栏&#xff1a;Easyx图形库应用&#x1f4c2; 目录 ✨一、程序展示 范例一&#xff1a;❤新年祝福❤ 范例二&#xff1a;❤母亲节祝福❤ ✨二、项目环境 简单介绍一下easyx图形库应用 Easyx图形库 ✨三、运行效果展示&#xff08;视频&am…

C语言之五子棋项目 基于EasyX图形库

C语言之五子棋 前言一、EasyX图形库下载与安装1.EasyX图形库下载2.VS2019设置EasyX图形库 二、五子棋中用到的图形库知识1.初始化页面2.文字显示3.鼠标操作4.棋盘绘制5.绘制棋子 三、五子棋核心程序1.放置棋子2.判断连棋3.人人对战4.人机对战 总结 前言 极客领航搁置许久&#…

C语言——EGE入门图形库实现经典魔塔游戏

个人博客地址&#xff1a;https://www.jdassd.top 该游戏的制作有一些疏漏的地方&#xff0c;目前发现以下几处&#xff1a; 在某些情况下&#xff0c;怪物可能会出现打不死但能够进入决斗界面的问题。上下楼梯口楼层转换时又回到该楼层或两楼层互相转换的问题。&#xff08;实…

【C语言】——基于Ncurse图形库的C语言小程序

游戏说明&#xff1a;运行在Linux环境下 基于Ncurse图形库的C语言小程序 项目知识要求:C编程基础、Linux基本操作&#xff08;代码编写、编译代码、运行代码、创建文件夹&#xff09; 代码的编辑&#xff1a;vi test1.c 进入文档按下i进行编写代码 按下esc进入命令行输入&…

C语言图形库EasyX安装及基本使用

本文章介绍C用EasyX进行C基础图形编程介绍。 EasyX安装&#xff1a; 1、点击上方超链接&#xff0c;进入官网&#xff0c;点击右侧下载EasyX 2、点击下载后的可执行文件&#xff1a; 3、EasyX安装非常简单&#xff0c;进入可执行文件&#xff0c;直接next&#xff0c;然后会自…