webstorm_webstorm less - CSDN
webstorm 订阅
WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。 展开全文
WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。
信息
外文名
WebStorm
开发公司
jetbrains公司
拼    音
wang luo feng bao
类    型
JavaScript 开发工具
名誉 1
Web前端开发神器
中文名
网络风暴
名誉 3
最智能的JavaScript IDE
名誉 2
最强大的HTML5编辑器
WebStorm功能
JavaScript· 基于DOM,特定浏览器完成· 编码导航和用法查询· 支持ECMAScript· 支持CoffeeScript· 支持结点· JavaScript重构· JavaScript单元测试· 代码检测和快速修复· JSLint/JSHint· 基于 Mozilla的JavaScript调试器其他用途· 批量代码分析· 编码语言混合或内混· 拼写检查器· 重复代码检测器编辑语言· 支持HTML5· css/js· 检验和快速修复· Zen编码· 显示内容· 显示应用的风格便捷的环境· HTML5样本文件和其他Web应用程序模板· FTP和远程文件同步· 集成了版本控制系统· 本地记录
收起全文
精华内容
参与话题
  • webstorm的安装及基本配置

    万次阅读 2018-06-12 10:40:36
    下载地址:https://www.jetbrains.com/webstorm/直接官方网站下载的 版本JetBrains WebStorm 2018.1.3 x64主要参考这个前辈的安装使用https://blog.csdn.net/weixin_41014370/article/details/79467061破解码也是...

    下载地址:https://www.jetbrains.com/webstorm/

    直接官方网站下载的  版本JetBrains WebStorm 2018.1.3 x64

    主要参考这个前辈的安装使用

    https://blog.csdn.net/weixin_41014370/article/details/79467061

    破解码也是各种搜索 最后用的 license server:http://hb5.s.osidea.cc:1017

    帮助文档 https://www.jetbrains.com/help/webstorm/2016.1/dialogs.html

    主要步骤:

    1、下载


    2、安装



    3、启动

    选择Do not



    择“License server”,然后在输入框中输入 License server address 为:http://hb5.s.osidea.cc:1017(有可能不能用,自己可以百度搜一下最新的)点击”Activate”按钮


    4、各种设置

    5、创建项目

    6、选择存放位置


    7、开始基本配置 主要在




    各种配置 可以根据自己的需求自行配置

    快捷键:              体贴易用小功能

    ctrl+n   新建文件ctrl+/  注释 
    按2下shift键  快速查找ctrl+alt+回车在当前行上面添加一行
    ctrl+r替换  
    alt+鼠标选择纵向修改排列在一条线上的元素ctrl+shift+回车在当前行下面添加一行                    
    alt键选择内容不松手多选ctrl+ -折叠代码块 
    esc 取消选择ctrl+ +展开代码块
    ctrl+alt+l代码格式化ctrl+shift+ -折叠整个文件代码
    tab键代码补全,嵌套alt+shift+上下移动键移动代码
    ctrl+d快速复制一行ctrl + m成对闭合标签定位 
    右击 Local History->show History 可查看修改历史记录,进行对比ctrl + e最近使用的文件
      Ctrl+shift + enter补全当前语句


    展开全文
  • webstorm配置和使用

    万次阅读 2020-08-14 08:59:22
    更新时间:2018年7月31日20:44:21 《我的博客地图》 《我的博客列表》 程序员,21世纪最高大上的职业之一,作为80后末尾的一名硕士毕业后择业进入IT行业的程序员,工作经验很有限,尤其刚进入新的工作环境,身边...

    更新时间:2020年08月14日08:59:12

    《我的博客地图》

    《我的博客列表》

        程序员,21世纪最高大上的职业之一,作为80后末尾的一名硕士毕业后择业进入IT行业的程序员,工作经验很有限,尤其刚进入新的工作环境,身边同事/大神都是工作经验在3年左右的老人,基本比我年龄都小,瞬间压力来袭无地自容,在这样一种工作环境下,如何突破自己,如何规划自己的职业发展,这必须是一个有计划的安排。因此,只有不停的学习和总结,只有不停的虚心求教和交流,只有不停的增加工作时间和强度,才能快速成长,超越自己。

    1、安装

        webstorm一直有版本升级更新,可以选择最新的安装,以webstorm 11版本为例,安装时选择License server,输入框输入,http://idea.imsxm.com/,即可完成安装。

    2、配置

        最佳方案:

        如果用过webstorm并且有属于自己风格的配置,第一步,导出配置文件,File-Export Settings,是一个后缀名为.jar的文件;

        第二步,将jar文件导入新安装好的webstorm软件中,File-Import Settings,即可完成配置。

    3、运行卡顿

        解决方案一:webstorm安装主目录>bin>WebStorm.exe.vmoptions,修改,第二行:-Xms526m,第三行:-Xmx1024m(-Xms最大值不能超过1024,否则webstorm将无法打开),重启即可。

        解决方案二:webstorm 11打开后底部总是出现一个不停运行的进程,显示scanning files to index,排除不希望索引的文件夹即可。找到你想排除的文件夹(主要是node_modulewe文件夹),右键选择 Mark Directory As > Excluded ,重启即可

    4、常用快捷键

    打开软件设置:ctrl+alt+s

    复制当前行当下一行:ctrl+d

    删除当前行:ctrl+y | ctrl+x

    重新开始一行(光标在当前行任何位置):shift+enter

    撤销(返回到上一步):ctrl+z

    取消撤销(前进到最后一次编辑节点):ctrl+shift+z

    注释:ctrl+/

    代码向上/向下移动(以行/块为移动基准):ctrl+shift+↑/↓

    当前文件搜索:ctrl+f

    指定文件路径(全项目下)搜索:ctrl+shift+f

    查看本地文件和上次提交成功的改动情况:ctrl+k,该快捷键打开的是git的commit界面

    选中所有相同的词语:ctrl+alt+shift+j

    选中下一个相同的词:alt+j

    同一个项目的不同文件窗口间切换:ctrl+tab

    格式化代码块:ctrl+shift+enter

    切换标签栏:alt+←  alt+→

    5、常用设置

        文件内容发生变动,文件名称的颜色会发生改变:修改文件名称在不同状态下的颜色

        Settings-Editor-Color&Fonts-File Status-Modified-Foreground

    6、修改文件内容颜色

        比如修改JSON文件的字体颜色:Settings--Editor-Color&Fonts-JSON

    7、解决代码冲突

    打开冲突对比界面:webstrom-vcs-git-resolve conflicts,三个部分分别是本地代码,需要保留的最终代码和线上代码。本地代码和线上代码不能改动,只能动需要最终保留的代码。最终,确定合并,解决冲突成功。

    8、代码提交

    ctrl + k;commit

    ctrl + shift + k;push

    9、中英文对照

     

    10、线上模板Live Templates配置

        例如:新建一个js文件,输入rn,按tab键,自动输入rn文件的基本内容,如下:
    import React, {Component} from 'react';
    import {
    Dimensions,
    TouchableOpacity,
    StyleSheet,
    Text,
    View,
    } from 'react-native';
    export default class HomePage extends Component {
    static navigationOptions = {header: null};
    constructor(props) {
    super(props);
    }
    componentWillMount(){
    }
    componentDidMount() {
    }
    componentWillUnmount() {
    }
    render() {
    return(
    <View style={Styles.container}>
    </View>
    )
    }
    }
    const Styles = StyleSheet.create({
    container: {
    flex: 1,
    backgroundColor: '#fff',
    },
    });
        设置-Preferences-Editor-Live Templates,点击有侧边栏+号,选择Live Template,Abbreviation为自定义的输入内容,Template text为要显示的内容,最后设置适用的文件类型即可;

    11、代码返回到指定节点(时间点)

        开发过程中,webstorm会自动记录每一次代码的修改和保存,因此,可以恢复每个文件到指定时间点或指定保存节点,操作如下:文件右键-Local History-Show History,即可恢复文件

    12、破解和使用

        一般网上查找license server,填写后即可使用。但有时无法使用,需要用到activity code,进入http://idea.lanyus.com/,点击获得注册码。注册码有效期为2017年10月15日至2018年10月14日,使用前请将“0.0.0.0 account.jetbrains.com”添加到hosts文件中,window OS的hosts文件路径:C:\Windows\System32\drivers\etc\hosts

    参考https://blog.csdn.net/voke_/article/details/76418116

    13、修改不同文件的不同文本内容高亮显示的配色方案

    以修改JavaScript文件变量声明的关键字为例:

    File-Setting-Editor-Color Scheme-JavaScript

    选中关键字var

    修改foreground前景色和Background背景色

    14、关于标签栏的数量和显示方式

    标签栏的数量,默认最多开10个标签:File-Setting-Editor-General-Editor Tabs-Tab limit

    标签栏的显示形式,默认顶部单行显示:

    File-Setting-Editor-General-Editor Tabs-Placement-top

    File-Setting-Editor-General-Editor Tabs-Show tabs in single row

    或者在菜单栏操作:Window-Editor Tabs-Tabs Placement

    15、分栏显示

    Window-Editor Tabs-Tabs Placement-Split Vertically(Split Horizontally)

    或者直接在标签上右键:Split Vertically(Split Horizontally)

    16、全局搜索某个字符串查找不到,或者某些快捷键失效

    这个问题困扰了很久,终于找到原因,webstorm需要清除缓存

    File - invalidate Caches

    17、左侧树状目录结构不显示文件夹 || 不显示文件夹目录结构

    问题原因:webstorm自动生成的配置文件.idea/modules.xml损坏了

    解决方案:关闭webstorm,进入文件目录,手动删除.idea文件夹,重新打开webstorm即可

    18、设置断点选中行代码的背景色

    Settings - Editor - Color Scheme - Debugger - Breakpoint line

    19、webpack识别项目中的路径别名(@/utils/funcs/locak)的配置方法

    Webstorm - Preferences - Languages&Frameworkd - JavaScript - Webpack - Webpack configuration file:导入带有module.exports.resolve = {alias: {'@':resolve('src')}}的webpack的配置文件

     

    未完,待续...

     

     

     

    展开全文
  • WebStorm安装与使用

    千次阅读 2018-08-26 11:22:01
    WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为"Web前端开发神器"、"最强大的HTML5编辑器"、"最智能的JavaScript IDE"等。   二、安装   官网...

    一、简介

     

    WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为"Web前端开发神器"、"最强大的HTML5编辑器"、"最智能的JavaScript IDE"等。

     

    二、安装

     

    官网地址:http://www.jetbrains.com/webstorm/

    去官网下载最新版本进行安装.

     

     

     

    下载之后进行安装

     

     

     

     

     

     

     

     

     

     

    启动软件

     

     

    下面会要求你激活,如果不激活的只有免费使用30天

     

    激活码可参考: http://blog.csdn.net/xx1710/article/details/51725012

     

    这个能用: http://idea.qinxi1992.cn/

     

     

     

     

    三、使用

     

    使用WebStorm创建一个项目

     

     

    这里支持有很多的类型项目:

     

    Empty Project         ----一个空的项目
     

    HTML5 Boilerplate     ----HTML5开发框架
     

    Web Starter Kit       ----Web Starter Kit 是 Google的一个开源项目,它里面提供了一些工具,比如 BrowserSync,实时的预览项目的变化,在不同浏览器上同步页面的行为。
     

    React App             ----基于React.js用来开发iOS和Android原生App。
     

    Twitter Bootstrap     ----Bootstrap是Twitter推出的一个用于前端开发的开源工具包。
     

    Foundation            ----Foundation 是一个易用、强大而且灵活的响应式前端框架,用于构建基于任何设备上的响应式网站、 Web应用和电子邮件。结构语义化、移动设备优先、完全可定制。
     

    Angular JS            ----AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。


    Angular CLI           ----Angular CLI 帮助开发者快速创建Angular 2项目和组件
     

    React Native          ----ReactNative可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。
     

    Node.js Express App   ----Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站
     

    PhoneGap/Cordova App  ----PhoneGap/Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头、麦克风等。
     

    Yeoman                ----Yeoman是Google的团队和外部贡献者团队合作开发的,他的目标是通过Grunt(一个用于开发任务自动化的命令行工具)和Bower(一个HTML、CSS、Javascript和图片等前端资源的包管理器)的包装为开发者创建一个易用的工作流。
     

    Meteor App            ----Meteor是跨时代的全栈Web开发框架,Github stars数已超越Ruby on Rails。使用它能够迅速地开发实时的(Real-Time)和响应式的(Reactive)应用,并且可以在一套代码中支持Web,iOS,Android,

    Desktop多端。Meteor能够轻松的和其他框架和应用结合,如ReactJS,AngularJS,MySQL,Cordova等。
     

    Dart                  ----Dart是一种基于类的可选类型化编程语言,设计用于创建Web应用程序。

     

    创建成功后的样子

     

     

     

    四、配置

     

    4.1设置背景色为黑色

     

     

    点击settings

     

     

    选择之后点击确定,然后整个软件的颜色就全变黑了。

     

    4.2设置字体大小

     

    字体设置在Settings-->Editor-->Colors&Fonts-->Font下面

     

     

    点击Save AS 先另保存一份再进行修改

     

     

    名字随便取、保存后修改字体为20

     

     

    点击OK就完成了修改。

     

    展开全文
  • 教你一步永久激活WebStorm2018

    万次阅读 2019-06-22 11:35:43
    前端开发有众多编辑器 sublime、vscode、webstrom等等,在这众多的开发编辑器中 webstorm 无疑是它们当中最为强大的一个,被誉为我们前端开发的神奇。 webstorm 不仅提供强大的语言的智能提示而且支持众多语言,...

    工欲善其事必先利其器,我们在开发过程中,编辑器是我们提高开发效率及生产必备的工具,如何发现一个高效好用的编辑器是程序员必备的技能之一。

    前端开发有众多编辑器 sublime、vscode、webstrom等等,在这众多的开发编辑器中 webstorm 无疑是它们当中最为强大的一个,被誉为我们前端开发的神奇。

    webstorm 不仅提供强大的语言的智能提示而且支持众多语言,简直让代码写起来直接起飞。

    由于 webstorm 是非开源免费软件,在使用之前需要先进行激活,但是每次使用的激活码都是时间不长,每次使用 webstorm 不是在激活就是在激活的路上。

    于是就想着能不能永久激活呢?经过一番倒腾之后…。此处省略很多字。所以你们直接享受成果就行,直接上干货!

    下载补丁

    webstorm 怎么下载应该不用我说了,我们直接从如何激活开始。

    补丁的下载地址:http://idea.lanyus.com/ 打开之后直接下载我们需要的破解补丁。

    补丁地址

    我知道肯定有人说我不想找,我想说你真 TM 懒,好好你懒你有理,你是大爷,给你给你,给你备好,直接点击连接即可下载!

    http://idea.lanyus.com/jar/JetbrainsCrack-3.1-release-enc.jar

    修改两个文件

    把我们下载好的补丁文件 JetbrainsCrack-3.1-release-enc.jar 复制到 webstorm 安装包的 bin 目录下。

    这一步很重要

    然后我们修改 bin 目录下的 webStorm.exe.vmoptions 和 webStorm64.exe.vmoptions,这两个文件,我们可以利用文本编辑器打开在文件的末尾加上如下代码

    -javaagent:D:/Program Files/JetBrains/WebStorm 2018.2.3/bin/JetbrainsCrack-3.1-release-enc.jar
    

    注意两个文件都需要修改,而且要注意你自己的安装包的目录,每个人安装的位置不同

    安装目录

    如果上述步骤做完之后,你的 webstorm 打不开,应该是你的文件修改的路径有问题,你自行进行检查一下。

    如果文件可以正常打开,我们会进入如下界面,输入 Activation code 点击 OK, 我们的激活至此就完成了。

    激活界面

    看看我们激活后的结果,可以用到 2100 年,不知道够不够你们用,反正够我用的了…

    首页

    我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=2zahgaw81iww0

    展开全文
  • WebStorm 2019下载和安装教程(已测有用)

    万次阅读 热门讨论 2019-07-26 17:08:04
    最新WebStorm 2019破解版下载以及汉化和安装教程(已测有用) WebStorm2019是一款功能强大的开发工具,这款强大的web前端开发神器使用为用户提供 了完善的开发必备功能和工具,让大家以更加轻松快捷的方式进行开发...
  • 参考: https://blog.csdn.net/sinat_31057219/article/details/79158978 正常情况: 先输入标签名,然后按tab即可 比如: div+tab ==》生成:<div></div> 如果想生成多个div: ...div...
  • 从臃肿的 Webstorm 转向更加轻便的微软爸爸的 VS code 也有一段时间了 总的来说,VS code 更加轻巧,可拓展性更强,同时它又是 Typescript 写的,根正苗红,又背靠微软这颗大树,插件生态又很不错,用得还是很舒服的...
  • vscode/webstorm快捷键

    2019-07-06 21:28:26
    复制当前行:shift + alt +up/down(上下箭头)可以修改成ctrl+d(改成webstorm一样) 然后找到你 想要修改的东西比如多行注释,右键点击change Keybinding,(同时按住ctrl+shift+/)按enter搞定 原来可...
  • 1、每行代码结尾自动加上;分号: Ctrl+Shift+S→编辑器→Code Style→Punctuation→Use(下拉框选Use)semiconlon to terminate statements 后面下拉框选always 2、JSON对象的属性名始终采用双引号: ...
  • WebStorm使用教程

    万次阅读 2019-05-21 16:40:39
    WebStorm安装与使用 webstorm配置和使用 WebStorm使用教程 Webstorm安装、破解、使用 webstorm的安装及基本配置 WebStorm安装与使用 webstorm的安装及基本配置 WebStorm安装教程 webstorm详细安装教程 Webstorm 超...
  • 前端神器 webstorm 使用技巧

    千次阅读 2020-04-23 17:24:28
    webstorm 本人从一直使用webstorm,用了至少5年多了,webstorm不亏是前端神器,下面share一下个人的一些Tips: 1. 修改 编辑器字体 file -> settings -> editor -> font修改字体 2. 修改console 字体 file -...
  • 需要设置这两步: (webstorm的版本2017.2)
  • Webstorm 设置 自动换行

    万次阅读 2017-08-10 16:56:52
    Webstorm 设置 自动换行
  • webstorm 调出 terminal 快捷键

    万次阅读 2015-09-19 11:35:47
    默认webstorm 显示终端 terminal 的快捷键 alt+f12
  • webStorm字体设置

    万次阅读 2016-12-29 12:13:38
    个人对编译器字体有特殊要求,毕竟个人习惯。非常喜欢webStorm软件,设置个人偏好字体如下:
  • WebStorm 的全局搜索字符串

    万次阅读 2018-05-01 20:22:09
    1. 选中项目鼠标右击,
  • webstorm:修改为黑色背景 好看的webstorm主题 黑色背景webstorm主题
  • 解决webstorm卡顿问题

    万次阅读 2016-01-25 23:38:37
    webstorm强大的功能就不多做介绍了。但是它的缺点也显而易见:吃内存。电脑配置稍低一点,运行webstorm就特别容易卡顿,特别是项目比较大的时候,那卡顿得不要不要的。在我的笔记本8g内存 256ssd的配置下,运行...
  • webstorm中怎么搜索文件

    万次阅读 2018-06-14 20:09:26
    Ctrl+N 文件搜索Ctrl+SHIFT+R 关键字搜索
1 2 3 4 5 ... 20
收藏数 30,318
精华内容 12,127
关键字:

webstorm