热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

webstorm是一款前端javascript开发编辑的神器,此文介绍webstorm的中文教程和技巧分享。webstorm8.0.3中文汉化版下载:百

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&#43;<-或->切换代码选项卡
ctrl&#43;shift&#43;N通过文件名快速查找工程内的文件&#xff08;必记&#xff09;
ctrl&#43;shift&#43;alt&#43;N通过一个字符快速查找位置&#xff08;必记&#xff09;
ctrl&#43;F在文件内快速查找代码
F3查找下一个
shift&#43;F3查找上一个
ctrl&#43;R文件内代码替换
ctrl&#43;shift&#43;R指定目录内代码批量替换
ctrl&#43;shift&#43;F指定目录内代码批量查找
ctrl&#43;R文件内代码替换

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

快捷键

说明

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

代码编辑

快捷键

说明

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

导航

快捷键

说明

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

建议配置版本控制快捷键

快捷键

说明

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


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

转:https://www.cnblogs.com/ExMan/p/6269489.html



推荐阅读
  • 基于JQuery实现的评分插件
    本文介绍了一个使用JQuery创建的交互式评分控件。当用户将鼠标悬停在星星上时,左侧的星星会变为实心,右侧保持空心,并显示对应的评分等级;移开鼠标后,所有星星恢复为空心状态。 ... [详细]
  • 本文详细介绍了如何在Kendo UI for jQuery的数据管理组件中,将行标题字段呈现为锚点(即可点击链接),帮助开发人员更高效地实现这一功能。通过具体的代码示例和解释,即使是新手也能轻松掌握。 ... [详细]
  • 本文介绍了如何利用JavaScript或jQuery来判断网页中的文本框是否处于焦点状态,以及如何检测鼠标是否悬停在指定的HTML元素上。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 本文介绍了如何使用JQuery实现省市二级联动和表单验证。首先,通过change事件监听用户选择的省份,并动态加载对应的城市列表。其次,详细讲解了使用Validation插件进行表单验证的方法,包括内置规则、自定义规则及实时验证功能。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 在使用 MUI 框架进行应用开发时,开发者常常会遇到 mui.init() 和 mui.plusReady() 这两个方法。本文将详细解释它们的区别及其在不同开发环境下的应用。 ... [详细]
  • 本文介绍了多个关于JavaScript的书籍资源、实用工具和编程实例,涵盖从入门到进阶的各个阶段,帮助读者全面提升JavaScript编程能力。 ... [详细]
  • 深入理解Vue.js:从入门到精通
    本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例,帮助开发者全面掌握这一流行的前端框架。 ... [详细]
  • 使用JS、HTML5和C3创建自定义弹出窗口
    本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例,详细讲解了实现过程中的关键步骤和技术要点。 ... [详细]
  • 本文详细介绍了如何解决Uploadify插件在Internet Explorer(IE)9和10版本中遇到的点击失效及JQuery运行时错误问题。通过修改相关JavaScript代码,确保上传功能在不同浏览器环境中的一致性和稳定性。 ... [详细]
  • 在Linux系统中配置并启动ActiveMQ
    本文详细介绍了如何在Linux环境中安装和配置ActiveMQ,包括端口开放及防火墙设置。通过本文,您可以掌握完整的ActiveMQ部署流程,确保其在网络环境中正常运行。 ... [详细]
  • 本文讨论了如何根据特定条件动态显示或隐藏文件上传控件中的默认文本(如“未选择文件”)。通过结合CSS和JavaScript,可以实现更灵活的用户界面。 ... [详细]
  • 根据最新发布的《互联网人才趋势报告》,尽管大量IT从业者已转向Python开发,但随着人工智能和大数据领域的迅猛发展,仍存在巨大的人才缺口。本文将详细介绍如何使用Python编写一个简单的爬虫程序,并提供完整的代码示例。 ... [详细]
  • 本文介绍了一段使用jQuery实现的用户注册页面表单验证代码,适用于前端开发人员学习和参考。该示例结合了HTML、CSS和JavaScript,确保用户输入的数据格式正确。 ... [详细]
author-avatar
小佛瞌睡蓝
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有