精华内容
下载资源
问答
  • WebStorm初始设置

    万次阅读 2016-09-03 12:47:58
    WebStorm是Node.js开发必备的一款软件,安装完这个软件后,你可能会要配置一下界面,下面具体讲讲:1 修改界面的颜色2 取消波浪线提示3 取消下划线的显示4 如何加入自动提示功能 (加入代码提示会极大的提升开发效率...

    WebStorm是Node.js开发必备的一款软件,安装完这个软件后,需要配置一下界面,下面具体讲讲:


    1 修改界面的颜色

    这里写图片描述


    这里写图片描述


    2 取消波浪线提示

    这里写图片描述


    3 取消下划线的显示

    这里写图片描述


    4 如何加入自动提示功能 (加入代码提示会极大的提升开发效率),个人感觉WebStrorm的代码提示功能还是非常强大好用的

    这里写图片描述


    5 右键选择 Run

    这里写图片描述


    6

    这里写图片描述


    7

    这里写图片描述


    8 根本上解决字符编码

    这里写图片描述


    9 快捷键设置,我习惯eclipse软件开发,因此我的快捷键类型选择eclipse,这样我就可以使用ctrl+shift+f 做代码格式化,很是方便

    这里写图片描述



    FR:海涛高软(QQ群:386476712)

    展开全文
  • 博主是mac开发,所以这里的webstorm快捷键只针对于mac电脑!!! 博主也是整理资料,为了提升自己的开发效率。 shift + Enter 软回车 ,无论在前一行代码的什么位置,都能定位到下一行. command + x 剪切鼠标当前...

    博主是mac开发,所以这里的webstorm快捷键只针对于mac电脑!!!

    博主也是整理资料,为了提升自己的开发效率。

     

     shift  + Enter         软回车 ,无论在前一行代码的什么位置,都能定位到下一行.

    command + x         剪切鼠标当前选中的一整行

    command + option + l      代码格式化(需先选中代码)

    command + 点击          定位引用的方法具体位置

    command + e         打开最近打开的文件或者项目 (直接支持文件名搜索)

     

    command + shift + v         选择粘贴剪切板上的内容(具有剪切板记忆功能) 

    command + d                 直接粘贴当前选中的内容

    command + 退格键          删除当前鼠标所在行

    command + option + 左右箭头           定位到上次编辑的位置

    command + f                           当前页搜索

    command + shift + f                 全局搜索内容

    command + shift + o                 搜索文件

    command + /                           注释/取消注释

    command + j                           输出模板

    control + tab                             切换上次打开的文件

    转载于:https://www.cnblogs.com/studyhtml5/p/6904619.html

    展开全文
  • 工欲善其事必先利其器,在和如此多的编辑器打交道后,我先下只有 vscode 能够提升开发的幸福感。无论是 vscode 的轻量感还是它的可配置性、拓展性都能给我带来很大的体验。下面我会从 vscode 入手阶段分享我对其外观...

    649ce047a7455e40cebc0664b9b3de9c.png

    入行到如今,先后折腾过无数的代码编辑器,大概有 sublime、webstorm、hBuilder、webstorm、eclipse、webstorm,vscode。工欲善其事必先利其器,在和如此多的编辑器打交道后,我先下只有 vscode 能够提升开发的幸福感。

    无论是 vscode 的轻量感还是它的可配置性、拓展性都能给我带来很大的体验。下面我会从 vscode 入手阶段分享我对其外观配置、风格检查、编码效率、功能增强等方面说一说我是怎么去配置 vscode 去提升我的编码幸福度感!

    1. 外观配置

    外观的配置能够最大限度的提升编程的幸福感,我会主要从编辑器的主题配色、图标方面考虑。下图是我的 vscode 的主题、图标的配置,当然每个人有每个人的喜好,我提供的仅供参考:

    a9684bb410d24889b09a8e91b6f8809c.png
    • 颜色主题:Monokia,vscode 以内置,可 command + k command + t 直接选择
    • 图标:vscode-icons,会给不同的文件类型,展示不同的图标,是文件层级也很直观
    • 字体:字体我用的是系统自带的,如有需要可以按照相关教程配置

    编辑器的颜色主题、图标、字体的配置,会给开发者带来最直观的视觉体验,最大程度的提升开发的幸福感。

    2. 风格检查

    团队协作开发都会注重编程的规范和风格的统一,对于前端开发而言,无非是对 HTML、CSS、Javascript、JSON、Typescript、Markdown 的规范,安装对应的 Lint 工具即可:

    • Eslint:插件化的代码检测工具,可以自定义代码检测规则,详细规范
    • TsLint:Typescript 验证
    • Markdownlint:规范的 Markdown 语法,能大限度的避免由于语法不规范造成的解析异常问题

    代码上除了上面的 Lint 工具,还可以使用 EditorConfig 插件,可以通过简单的配置来避免团队成员使用不同的 IDE、不同平台的造成的文件的编码格式、代码的缩进方式造成的代码混乱,以下是项目中常用的配置:

    # https://editorconfig.org
    root = true
    
    [*]
    charset = utf-8
    indent_style = space
    indent_size = 2
    end_of_line = lf
    insert_final_newline = true
    trim_trailing_whitespace = true
    
    [*.md]
    insert_final_newline = false
    trim_trailing_whitespace = false
    

    有了代码的风格检查后,自然会有按照配置来格式化代码的工具,推荐工具如下:

    • Prettier:几乎支持格式化前端所有代码,并支持通过文件来配置规则
    • Vetur:格式化 .vue 文件,包括里面的 HTML、CSS

    3. 编码效率

    合理的使用 代码片段自动补全 能够大大提高编码的效率

    代码片段

    代码片段 Snippets,主流的浏览器都支持,其原理是将常见的代码块抽离,通过几个按键匹配展开 N 行代码,代码片段的积累一方面要根据个人习惯,另一方面要更具社区学习良好的编码风格,常用的插件如下:

    • JavaScript (ES6) code snippets:提供常用的 ES6 代码片段
    • HTML Snippets:提供各种 HTML 标签片段
    • Element UI Snippets:提供 ElementUI 常用代码片段

    自动补全

    自动补全实质上和代码片段类似,但是在某些特殊场景下会以用户的输入作为启发式信息提供可能要输入的建议,常用工具如下:

    • Emmet:从 sublim 用至今,它可以把类 CSS 的选择符展开成 HTML 标签,目前 vscode 已经内置,详细介绍参考文档
    • Auto Close Tag:适用于 HTML、Vue、JSX,在打开标签并输入 </ 时候能够自动不全要闭合的标签
    • IntelliSense for CSS class names in HTML:CSS 类名补全,会自动扫描项目里的 css 类名,在输入类名时智能提示
    • Auto Rename Tag:适用于 HTML、Vue、JSX,修改标签名称时,只需要修改开始(结束)的标签,它会对应帮我们修改结束(开始)的标签
    • Path Intellisense:文件路径补全,引入文件时会智能提示和自动完成

    4. 功能增强

    除了上述的提升开发效率的配置外,我还安装了下面的一些插件:

    • Bracket Pair Colorizer:识别代码中的括号,并标记不同的颜色,当代码多层嵌套时,这简直是开发的福音
    • Code Runner:代码一键运行,支持 40 多种代码
    • Document This:自动添加代码注释
    • GitLens:git 源代码管理插件
    • open in browser:在浏览器中打开文件

    结语

    开发中,合理的使用各种配置、工具,能够将复杂的事情简单化极大的提升工作效率。

    欢迎推荐你在开发中用到的能够提升开发效率的工具。

    展开全文
  • less在webstorm中的配置

    千次阅读 2018-06-22 09:25:48
    css预处理技术已经发展的比较成熟了,通过css预处理技术可以很好的提升css的编程性,提高css代码开发效率和可维护性,目前比较热门的相关技术有Sass、Less CSS、Stylus、Compass等 Less是一种动态样式语言,属于...

    css预处理技术已经发展的比较成熟了,通过css预处理技术可以很好的提升css的编程性,提高css代码的开发效率和可维护性,目前比较热门的相关技术有Sass、Less CSS、Stylus、Compass等

    Less是一种动态样式语言,属于css预处理语言的一种。它使用类似CSS的语法为CSS的赋予了动态的特性,如变量、继承、运算、函数等,更方便css的编写和维护实现css模块化。less 可以在多种语言,环境中使用,包括浏览器端、桌面客户端、服务端。

    相比Sass而言,Less要简单易上手一些,但是编程性较Sass而言,略有不足。

    1. 语法

    语法主要包括以下方面,示例直接看文档即可less中文文档
    变量、混用(直接混用、带参数混用、@arguments 变量)、模式匹配和导引表达式、嵌套规则、运算、Color 函数、Math 函数、命名空间、作用域、注释、Importing、字符串插值、避免编译、JavaScript 表达式、避免编译

    2. 在webstorm中的配置(windows下,git bash)

    命令行 npm install -g less , 安装完成后记下lessc路径
    1.png
    打开webstorm的file watchers, file->settings->Tools->file watchers
    在弹窗的窗口的右上角点击绿色的 ‘+’ 号,然后选择less,按照下图进行配置:
    2.png
    确定应用即可。这样我们创建less文件会自动生成css文件,修改less,css也会自动更新。
    3.png

    3. 参考链接

    展开全文
  • 开发工具(工欲善其事,必先利其器) 为了让大家更快的融入到编程的世界中去,不被繁琐的英文单词所困扰,不用每天编写很多没有意义的重复代码提升大家的开发效率,今后的课程中我们统一采用开发工具来编写网页 .....
  • 自动检测语法错误,提升代码质量的同时也是的代码风格统一,较少交接成本。 结合IDE自动解决低级语法错误,提高开发效率。 前言 ESLint是什么? ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项...
  • 甚至有让代码起飞的感觉。 比如 WebStorm,Atom,VS Code,Sublime Text 等等。各种工具各有千秋。不妨多试试,找找它们的特点,慢慢地你会知道什么适合自己。 3 前端自动化 谈到提高开发效率,不得不...
  • web开发中的 emmet 效率提升工具 可以用来快速生成html 代码。 并且给各种IDE、编辑器提供了插件支持,sublime ,webstorm等。 如在webstorm中安装好emmet之后,输入以下文本, #page>div.content[ng-model=...
  • 代码,善于使用IDE的功能特性配置,能让你的开发效率大大提升。此文使用于JetBrains系列的IDE,包括IntelliJ IDEA、WebStorm、PyCharm、Android Studio(谷歌产品,操作与JetBrains全家桶大同小异)等,本文主要...
  • 这两款编辑器的安装都很简单,这里主要介绍在Cocos Creator项目中如何调整编辑器配置,以提升开发效率。1. 排除干扰文件我们知道Cocos Creatror会为项目资源文件生成同名的meta文件,在代码编辑器中很是碍眼...
  • 这两款编辑器的安装都很简单,这里主要介绍在Cocos Creator项目中如何调整编辑器配置,以提升开发效率。1. 排除干扰文件我们知道Cocos Creatror会为项目资源文件生成同名的meta文件,在代码编辑器中很是碍眼...
  • Cocos Creator 游戏开发主要是...这两款编辑器的安装都很简单,这里主要介绍在 Cocos Creator 项目中如何调整编辑器配置,以提升开发效率。1. 排除干扰文件我们知道 Cocos Creatror 会为项目资源文件生成同名的 meta...
  • Cocos Creator 游戏开发主要是...这两款编辑器的安装都很简单,这里主要介绍在 Cocos Creator 项目中如何调整编辑器配置,以提升开发效率。1. 排除干扰文件我们知道 Cocos Creatror 会为项目资源文件生成同名的 meta...
  • Cocos Creator游戏开发主要是使用JavaScript语言,这里向大家推荐Visual Studio Code和Webstorm两款...这两款编辑器的安装都很简单,这里主要介绍在Cocos Creator项目中如何调整编辑器配置,以提升开发效率。 1. 排...
  • 快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、js、css的开发效率。同时,它还包括最全面的语法库和浏览器兼容性数据。 基本简介 目前主流的前端开发工具有Sublime为代表的...
  • HBuilder:最快的Web开发IDE

    千次阅读 2015-01-03 17:31:01
    快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、js、css的开发效率。同时,它还包括最全面的语法库和浏览器兼容性数据。   从Frontpage、Dreamweaver、UE,到Sublime...
  • Vue技术点整理-前言

    2019-10-02 11:10:02
    2 本文档编写目的为:整理Vue相关生态的技术点、和简单使用代码示例,让开发者快速上手开发,提升开发效率 一,Vue开发工具:本人使用Hubilder X开发工具(Vue特别赞助商 ),选择合适自己的开发工具即可:  例如...
  • 这两款编辑器的安装都很简单,这里主要介绍在Cocos Creator项目中如何调整编辑器配置,以提升开发效率。 1. 排除干扰文件 我们知道Cocos Creatror会为项目资源文件生成同名的meta文件,在代码编辑器中很是...
  • 一个插件把 Web VS Code 变为 C/C++ IDE ... 每一个想成为王者的程序员一定要熟练地使用工具来实现自己的想法没有工具那就 自己造让写代码如丝般顺滑 VS Code 开发中的那些障碍 开源比 Atom 快比 Webstorm 轻量VS Code
  • 5.代码生成器非常智能,在线业务建模、在线配置、所见即所得支持23种类控件,一键生成前后端代码,大幅度提升开发效率,不再为重复工作发愁。 6.低代码能力:Online在线表单(无需编码,通过在线配置表单,实现表单...
  • 4.代码生成器非常智能,在线业务建模、在线配置、所见即所得支持23种类控件,一键生成前后端代码,大幅度提升开发效率,不再为重复工作发愁。 5.低代码能力:Online在线表单(无需编码,通过在线配置表单,实现表单...
  • 工欲善其事必先利其器,在和如此多的编辑器打交道后,我先下只有 vscode 能够提升开发的幸福感。无论是 vscode 的轻量感还是它的可配置性、拓展性都能给我带来很大的体验。下面我会从 vscode 入手阶段分享我对其外观...

空空如也

空空如也

1 2
收藏数 37
精华内容 14
关键字:

webstorm代码提升开发