Webstorm使用心得

2023-11-19

原文来自:http://www.jianshu.com/p/4ce97b360c13

Webstorm 大多数配置都在File -> Settings选项卡中进行的,也许你不得不第一个记住它的快捷键:Ctrl + Alt + S。1. 设置开发工具主题/风格File -> settings -> Editor -> colors&fonts -> scheme name.跟人觉得Default Darcula这两款主题还可以,如果内置主题都不喜欢,可以去主题下载地址寻找你中意的主题。2. 换成自己熟悉编辑器的快键键:如 Eclipse 的快捷键 + 自定义快捷键组合

在这里插入图片描述

快捷键设置3. 取消勾选安全保存时间这两项取消勾选,否则影响热更新,不能及时将修改的内容反应在浏览器上。

在这里插入图片描述

取消勾选安全保存时间4. 集成 Eslint集成 Eslint 的前提是你的项目里使用了 Eslint。

在这里插入图片描述

集成 Eslint5. 集成 Git对 Webstorm 集成 Git 的前提是你已经掌握 Git 的基础使用方法,如果对于 Git 的基本概念不了解的话,可以参阅:廖雪峰 Git 教程。

在这里插入图片描述

集成 GitWebstorm 集成 Git 带来的遍历就是将 Git 的指令用选项的意思表达出来,如果你熟悉 Git 是如何提交代码的,那么在 Webstorm 使用 Git 提交代码应该不是什么难事。

在这里插入图片描述

git 提交代码对于分支的操作在 Webstorm 右下角
在这里插入图片描述

操作分支6. 常用开发工具窗口开发过程中,最常用的工具窗口有以下几个:Project 记录项目的层级结构;(快捷键 Alt + 1)Structure 记录当前文件内部的层级结构,方便快速定位到某个方法;(快捷键 Alt + 7)Npm 使用 npm 构建的工程,Npm 窗口会记录 package.json 里的脚本信息,一般用于快速启动项目;快捷键 (Ctrl + E)TODO 项目中难免会预留 TODO 标记用于日后完善,该窗口可以快速定位到哪个文件的哪一行预留了 TODO 标记。(快捷键 Alt + 6)

在这里插入图片描述

常用开发工具窗口7. 配置 Less 自动转译 CSS在进行配置之前,请确保你已经使用 npm/yarn 或其它工具全局安装了 less 包。$ npm install less -g

在这里插入图片描述

配置 Less 自动转译 CSS8. Webstorm 安装 Editorconfig 插件如果你的项目中要使用 .editorconfig 配置文件控制代码风格,那么 Editorconfig 插件必不可少。Webstorm 2017.1 及之后的版本都默认安装了这个插件,如果没有安装,参照下图自行安装。

在这里插入图片描述

安装 Editorconfig 插件9. 文件类型设置 —— File Types在使用微信开发工具开发小程序时,经常遇到这么个问题:小程序开发工具不支持多例模式,一次性只能打开一个项目,可是同时又想打开其他项目参考里面的代码,总不至于用文本编辑器打开吧。我的选择是使用 Webstorm 打开小程序的项目,可是随之而来的一个问题就是小程序的 .wxml 和 .wxss 文件类型 Webstorm 无法识别,代码都是一片黑色,没有背景高亮看着很是不舒服。使用 File Types 可以将 .wxml 和 .wxss 文件类型添加到 Webstorm 中。

在这里插入图片描述

File Types 设置在 Cascading Style Sheet 下添加 *.wxss 类型,使用 css 语法高亮;在 HTML 下添加 *.wxml 类型,使用 html 语法高亮。注意:前面的 * 号不能忘记。

  1. Webstorm 2017.2 版本使用搜狗输入法卡顿问题卡顿卡的人心烦,查了一些资料都没起作用,就差重装 Webstorm 了,后来在搜狗贴吧上看到一方法试了试是有用的。安装搜狗输入法最新版本,然后重启 Webstorm(刚装好没重启,使用输入法还是卡,以为没啥用,后来重启之后发现一点都不卡了)。

  2. 快捷键 —— 最常用的快捷键最佳应在 10 个以内
    Ctrl + Shift + R—— 快速定位到文件并跳转
    Ctrl + Shift + F—— 全局搜索文件内某个字符串 (Webstorm 默认快捷键,eclipse 中是Ctrl + H)
    Ctrl + E—— 打开最近操作过的文件
    Ctrl + Alt + L—— 格式化代码(与 QQ 快捷键冲突,自定修改 QQ 快捷键)
    Ctrl + Y—— 删除光标所在行
    Ctrl + Alt + S—— 打开设置窗口四、优化 Webstorm使用 webstorm 有时打开项目时很慢很慢,有时操作时卡顿,这些不好的体验都可以通过简单的设置规避掉。

  3. 调整 webstorm 内存webstorm 安装目录 > bin > WebStorm.exe.vmoptions。
    文本编辑器打开,修改第二行和第三行内容。第二行:-Xms526m第三行:-Xmx1024m楼主电脑是 8 g 内存,这样分配明显好很多,测试发现 -Xms 最大值不能超过1024,否则webstorm将无法打开。2. 把不必要索引的文件进行排除webstorm 如果同时引入很多个项目也会导致卡顿,我们可以将不需要的项目隐藏起来,和 Eclipse 中 close project 功能一样。选择项目 > 右键 > Mark Directory As > Excluded。操作完成后会发现项目“消失了”。不过还是建议 webstorm 只打开一个项目。3. 关闭 node_modules 校验在 node 项目中存在 node_modules 目录,每次打开 webstrom 时会校验文件,同样也会校验 node_modules 中的内容,这会浪费很多时间。

在这里插入图片描述

关闭 node_modules 校验

  1. 取消勾选不常用的插件webstorm 中可以集成很多插件,这些插件也会影响运行速度,有的插件你可能压根都没听过,更不会使用,可以取消勾选。
    在这里插入图片描述
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Webstorm使用心得 的相关文章

  • 基于java的饮食分享平台系统设计与实现

    基于java的饮食分享平台系统设计与实现 I 引言 A 研究背景和动机 近年来 随着人们生活水平的提高和健康意识的增强 饮食健康已经成为越来越多人的关注焦点 因此 一个方便快捷的饮食分享平台就显得尤为重要 基于Java的饮食分享平台系统设计
  • 软件测试|web自动化测试神器playwright教程(三十八)

    简介 在我们使用selenium时 我们可以获取元素的属性 元素的文本值 以及输入框的内容等 作为比selenium更为强大的web自动化测试神器 playwright也可以实现对元素属性 文本值和输入框内容的抓取 并且实现比seleniu
  • HTML概述、基本语法(表格整理、标签、基本结构)

    一 HTML概述 HTML指的是超文本标记语言 超文本 是指页面内可以包含图片 链接 声音 视频等内容 标记 标签 通过标记符号来告诉浏览器页面该如何显示 我们可以打开浏览器 右击页面 点击 查看网页源代码 来方便了解HTML标签通过浏览器
  • Vue3 和Vue2的区别,以及钩子函数的使用

    Vue js 3 和 Vue js 2 是两个主要版本的流行前端框架 它们之间有很多区别 包括性能优化 新特性和改进的API等 以下是一些Vue 3与Vue 2之间的主要区别 以及一些示例代码来说明这些差异 1 性能优化 响应式系统 Vue
  • 低代码配置-组件列表设计

    过滤字段功能 配置了api 启用 输出配置 filter type Array default gt
  • Web自动化测试 —— cookie复用

    一 cookie简介 cookie是一些数据 存储于用户电脑的文本文件中 当web服务器想浏览器发送web页面时 在链接关闭后 服务端不会记录用户信息 二 为什么要使用Cookie自动化登录 复用浏览器仍然在每次用例开始都需要人为介入 若用
  • 如何配置 JetBrains 产品来调试需要设置上下文值的 CDK TypeScript 应用程序?

    我有一个 CDK 应用程序 我可以在其中获取上下文值 例如 const stage StageType app node tryGetContext stage 我按照 JetBrains 文档使用 ts node 设置运行配置 但是上下文
  • 如何在 PhpStorm/ WebStorm 中自动缩小 html 文件?

    对于 CSS 文件 我创建了一个文件观察器 如下所述manual https www jetbrains com help phpstorm 10 0 minifying css html 另外对于 JS 文件 请参见manual http
  • 在 WebStorm 中的导入和大括号之间添加空格

    是否可以在 WebStorm 的自动导入功能中在导入和大括号之间添加空格 目前自动导入的样子 import AbstractControl from angular forms 我想把它改成 import AbstractControl f
  • Webstorm 中的 Sails.js 智能感知

    Webstorm for Sails js 应用程序有可用的智能感知吗 在我的所有控制器中 我收到模型未定义的消息 即使它工作得很好 呼叫服务也是如此 我知道这有点旧 但我最终所做的是首先使用与文件相同的名称 如类名 命名所有 module
  • Webstorm 无法识别 Grunt

    所以我搞砸了删除和安装节点和 npm 来安装没有 sudo 的软件包 现在我无法在 Webstorm 中使用 Grunt 面板 消息是 grunt no color gruntfile Users max repos cb Gruntfil
  • app.use(验证器()); ^ TypeError:验证器不是函数

    我正在开展一个夏季培训项目 我被要求使用以下命令创建一个登录页面Node js但是 安装后express validator并输入我想在的代码app js文件每次运行时都会打印出一个错误app js or the www在 bin 文件中告
  • 如何从 WebStorm 中运行 nodemon?

    我想用nodemon https github com remy nodemon从 WebStorm IDE 版本 7 中 Nodemon 监视源文件夹中的一个或多个文件 并在其中一个源文件发生更改时重新启动节点进程 本例中为 Expres
  • 如何使用 angular-cli 调试 Angular2 中的应用程序?

    有谁知道是否可以通过命令行使用 angular cli 来调试应用程序ng serve在网络风暴中 我尝试了此网址中发布的解决方案 如何使用 Angular CLI Webpack 调试 Angular 2 应用程序 https stack
  • WebStorm 没有本地存储的库

    我一直在开发一个完全可以在 jsfiddle net 上运行的项目 然而 当我尝试在 webStorm 中运行这个项目时 我收到两个错误 first second 之前 我在这里发布我的问题 我在 stackoverflow 上搜索但找不到
  • WebStorm/PHPStorm 中的智能选项卡有什么作用?

    我对智能选项卡在一般偏好中的作用感到困惑 它说 仅通过空格即可对必要的列进行精细对齐 如果 如果未选中此复选框 则使用空格进行对齐 必要的 这是否意味着在这两种情况下都使用空格来对齐 这是否意味着它总是在后者中使用空格 而仅有时在前者中使用
  • 设置Webstorm/PHPStorm文件刷新时间

    这可能只是一些我似乎找不到的简单设置 事情是这样的 我有一个带有一些 Compass Sass CSS 的 Web 项目 当我修改 Sass 文件时 Compass 会自动为我创建相应的 CSS 文件 如果文件发生更改 Webstorm 会
  • 为什么 AngularJS 指令(属性等)在 WebStorm 8 中显示为“无效”?

    我几个小时前刚刚安装了 WebStorm 8 我一直在写一些 AngularJS 的东西 但我有一个相当烦人的小问题 AngularJS 插件似乎只能部分工作 每当我输入 ng 时 我都会收到一个智能感知弹出窗口 其中显示所有各种 ng 属
  • 如何使用键盘快捷键在Intellij-IDEA中显示(展开)隐藏(折叠)的代码?

    如何在 IntelliJ IDEA 中显示 展开 隐藏 折叠 的代码 如下图所示 仅使用键盘而不触摸鼠标 在 IntelliJ IDEA 中 您可以使用以下快捷方式来折叠 展开代码块 To fold and unfold CURRENT s
  • 如何在 WebStorm 中“运行”TypeScript 文件?

    在我的 WebStorm IDE 中 所有 js and jsx 我的项目中的文件有一个关联的 运行 命令 但此功能不存在 ts or tsx files 我相信我已经为 TypeScript 正确配置了我的项目 因为我至少能够运行tsc从

随机推荐

  • python的安装与环境配置

    一 访问python的官网进行下载对应的版本 python官网的地址 Welcome to Python org 点击Downloads 选择Download Python 3 11 4 目前最新的python 也就是3 11 4 之后等待
  • Redisson框架官方介绍

    我们现在看到的就是redission官方网站 https redisson org 首页可以看出来 redisson可以实现很多东西 在redisson的基础上 redisson做了超多的封装 我们看一下 例如说 Spring Cache
  • python获取windows窗口_pywin32 怎么获取 windows 的窗体内文本框的内容?

    我已经用 spy 去确认我找到了文本框的句柄了 用函数 win32gui SendMessage 获取不了文本框的文本内容 用 str 类型的参数接收获取的内容的话没有获取到东西 而用 PyBuffer 类型去获取则得到类似于 16 进制的
  • 助你解锁万物智联新机遇 —— YMatrix 超融合数据库

    近期 在 YMatrix 5 0 发布会上 四维纵横创始人 CEO 姚延栋分享了 返璞归真 以简驭繁 YMatrix 超融合数据库 5 0 发布 的主题演讲 在本次演讲中 介绍 YMatrix 超融合数据库的发展历程及现阶段的技术痛点 深入
  • Leetcode Shortest Palindrome (最短回文串)

    Leetcode Shortest Palindrome 最短回文串 题目描述 Given a string S you are allowed to convert it to a palindrome by adding charact
  • clang 01. clang driver流程分析

    文章目录 前言 在这里简要概述一下clang的流程 1 clang driver代码分析 1 1创建诊断 DIagnosticsEngine 实例 1 2创建Driver clang driver Driver 的实例 1 3通过 Driv
  • 计算机勾兑双绝是谁发明,勾兑大师范玉平之“舌尖上的五粮液”

    1958年 那是一个热火朝天的时代 在五粮液酒厂的仓库里 人们总能看到一位斯斯文文的小伙子 在一阵阵紧张的收货发货后 不紧不慢地将那些大大小小的酒坛收拾得整整齐齐 之后他便一边对着账本 一边慢条斯理地抿着小酒 尽管他手中的酒杯里常常只有半杯
  • 网页是如何显示在浏览器

    这两天学习了一些网页如何在浏览器中显示的知识 感觉在我向前端走的路上非常有用 所以就在这里总结一下 大家可以看看 我也算是巩固一下知识 因为自己学识太浅 内容可能有一些错误之处 希望看到的朋友可以指出来啦 在Edge浏览器也加入Chromi
  • 低投入也有高效率!Fortinet 安全 SD-WAN方案赋能金融保险行业

    当前 金融保险等行业进入数字化转型的快速发展阶段 数字化效能不断提升的同时 也对广域网等基础IT建设提出了更高的需求 某保险公司在全国的省级分公司和多级分支机构多达上百家 近年来 蓬勃的数字化应用对其广域网带来了巨大挑战 该公司采用Fort
  • ARGB,RGB颜色值表示

    转载请注明出处 http blog csdn net wei chong chong article details 50831493 今天自定义一个控件 设置背景颜色时犯难了 现在就来总结一下android中的颜色值表示 android
  • 9月,Java岗爆了!

    你有面试机会了吗 随着金九银十到来 肯定有很多小伙伴想抓住一年两次的机会 开始疯狂投简历了吧 但是事实是 投出去的简历基本上HR都是已读不回 收到面试邀请 被告知不用面试了 参加了面试 就像走了个过场 成了HR的业绩指标 面试通过 但是被放
  • LWIP在STM32上的移植

    本文做记录摘抄 加上自己的体会 文章标题 STM32使用LWIP实现DHCP客户端 http www cnblogs com dengxiaojun p 4379545 html 该文章介绍了几点 LWIP源码的内容 关键点 1 inclu
  • id选择器和class选择器

    id选择器 id选择器用来选取带有给定id属性的元素 语法 id例如 html div div css container color blue id选择器的一些特征 1 id选择器以 号开头 后跟元素的id属性值 2 id选择器只能选取带
  • 英伟达最新开源

    Title FasterViT Fast Vision Transformers with Hierarchical Attention Paper https arxiv org pdf 2306 06189 pdf Code https
  • 《Terraform 101 从入门到实践》 Functions函数

    Terraform 101 从入门到实践 这本小册在南瓜慢说官方网站和GitHub两个地方同步更新 书中的示例代码也是放在GitHub上 方便大家参考查看 Terraform的函数 Terraform为了让大家在表达式上可以更加灵活方便地进
  • 计算从指定日期开始的第几周的周几的日期

    项目场景 拿到的排课表数据 里面没有具体日期 而是第几周 周几的形式 需要转换成具体日期 问题描述 其中的周几是从周一开始的 从1 到7 转换时也是按这个顺序来 原因分析 先需要获取到学期开始的日期 例 date1 得出是周几 例 周3 是
  • Java实现动态数组

    Java中动态数组的实现是非常常见的数据结构 可以用来存储一组数据并动态调整数组的大小 本文将以 Java 语言为例 介绍如何实现一个简单的动态数组 其中包含基本操作如增加 删除 查询和遍历等 1 定义动态数组 在Java中 可以使用int
  • systemc verilog IEEE 注册登录下载

    https accellera org downloads standards systemrdl SystemRDL 2 0 SystemRDL Register Description Language 一次定义 多种HDL语言场合使用
  • 深入了解计算机端口(2)

    转载 url http www exam8 com computer spks ziliao ws 200504 10798 2 html url Virtualizing DNS DHCP Soft appliances for easy
  • Webstorm使用心得

    原文来自 http www jianshu com p 4ce97b360c13 Webstorm 大多数配置都在File gt Settings选项卡中进行的 也许你不得不第一个记住它的快捷键 Ctrl Alt S 1 设置开发工具主题