前端开发常用哪些工具软件

前端开发的编译器在选择上还是很多的。在学校里，老师主要讲三个前端开发软件：

1、WebStorm

帮助编写HTML、CSS、Less、Sass和Stylus代码，并且支持Nodejs和主流框架，如React、Angular、 Vuejs、Meteor等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。但是付费软件。

2、IntelliJ idea

idea是学校老师教得最多的一款软件，从学Java开始，除了eclipse和myeclipse之外，学校老师用的最广泛的Java编译器就是idea，而idea也能进行前端项目的开发，idea是我用得最熟的一个编译软件。像一个完整的前端网站，配置好jdk，tomcat，maven，数据库之后就可以在idea上进行搭建了。

3Visual Studio Code

简称VScode，前端开发时期学习的第一款软件，当时学VScode的时候上的网课，老师用插件的时候一个没跟上，就跟不上了。总体感觉下来是插件库很丰富，而且内存占用不大，目前我身边用VScode的人是最多的。

下面是我在实习中接触到的前端开发工具：

notepad++

页面很简单，乍一看像是一个记事本，它也确实可以当记事本用。有很多特色插件可以使用，支持多种编程语言的语法高亮显示，具有代码折叠功能。

2、HBuilderX

HBuilderX是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。是HBuilder下一代版本，具有轻便、适合vue框架的特点。

1、首先需要将webstorm安装在自己的电脑上；2、然后从网上下载汉化包；3、将文件解压并打开找到resources_cnjar压缩包；4、找到你电脑中webstorm的安装路径位置，并将文件打开；5、找到文件夹“lib”,注意汉化包就是放在这里哦；6、将resources_cnjar压缩包直接拖到安装目录文件夹“lib”里即可；7、最后重新启动webstrom时既是汉化版的啦

1 首先确定你的电脑系统是windows系统，因为在windows系统下可以使用WebStorm+vue来打包apk

2 安装Nodejs，这是WebStorm+vue使用的一个运行环境，并确认安装完成后，设置环境变量，这样才能使用WebStorm+vue来打apk包

3 下载安装WebStorm，这是一款编辑器，可以在其中编写和编辑vue项目

4 安装vue-cli，这是一个vue的脚手架，可以帮助你快速构建vue项目

5 使用vue-cli建立一个apk项目，在WebStorm中打开该项目，并进行编辑

6 安装cordova，这是一个可以在浏览器中运行vue项目的框架

7 加入cordova插件，这是一个可以将vue项目打包成apk的插件

8 在WebStorm中运行项目，就可以将vue项目打包成apk，安装到手机上进行测试。

(摘自互联网)

第一步：检查Mac内存占用情况

1、点击右上角的搜索，搜索活动监视器，双击图标打开

2、可以查看webstorm使用的时候占内存基本是排第一的，尤其是在使用webstorm的iTerm命令窗口 *** 作的时候（我是在使用npm安装Gulp插件），然后我的本本开始键盘发热（右上角更明显），有很明显的风扇转动的声音，这个时候察觉到内存不足CPU占用太高。(ps:所有还是推荐用Mac自带ITerm)

3、查看webstorm的占用内存配置文件，打开Finder选择Application应用程序，找到webstorm右键，选择显示包内容

路径：content/bin，选择webstormvmoptions（有的是ideavmoptions这个文件？）

第二步，将webstorm不需要用到的插件关掉

第三步：修改webstorm使用内存参数，防止卡顿或者闪退（修改阈值减少所占内存比例并不是减少内存数值）

1、选择webstormvmoptions这个文件用webstorm打开

默认参数是

-Xms128m

-Xmx750m

-XX:MaxPermSize=350m

-XX:ReservedCodeCacheSize=240m

-XX:+UseCompressedOops

-javaagent:JetbrainsCrackjar

2、修改前两个数值为：

-Xms512m

-Xmx2048m

-XX:MaxPermSize=350m

-XX:ReservedCodeCacheSize=240m

-XX:+UseCompressedOops

-javaagent:JetbrainsCrackjar

可能遇到的问题，会d出窗口询问是否修改当前文件。因为不是当前打开项目中的文件，是其他文件，软件有d出警告框询问是都修改，这个时候选择OK确认就可以。

修改成功！

主题设置

方法：File -> Settings -> Appearance & Behavior -> Appearance ->Theme

WebStorm默认情况下一次只能打开一个项目，这点很不爽，其实是可以设置的。（ 注：如果你一开始就建了项目再来配置，记得要把左边显示的根路径移除，不然可能点击Add Content Root配置后也不一定能生效 ）

方法：File -> Settings -> Directories -> Add Content Root 中添加你当前的工程目录。

方便其他ip设备访问(如手机等测试效果）

方法：File -> Settings -> Build,Execution,Development -> Debugger ->port

方法：File -> Settings -> Editor -> File Encodings -> IDE Encoding,Project Encoding

( 注：配置前和配置后都可以打开页面，在页面的右下角显示有编码，下面截图右下角就有 )

你可以使用默认快捷键配置，也可以根据自己的风格选择配置。习惯eclipse和myeclipse开发的可以配置成eclipse快捷键。

方法：File -> Settings -> Keymap-> Keymaps

上面提到了快捷键，webstorm自带emmet插件。用过zen coding的人应该都知道，emmet就是zen coding的升级版。当然，webstorm也不是支持所有的 emmet语法 ，不过够用了。可以参考此文 Enabling Emmet Support 看看具体情况。

如下图，可以看到css自动加浏览器厂商前缀。

打开页面后，右击页面左边边界，d窗选项，根据自己需要勾选就是，如下图：

当你需要在其他电脑的webstorm上也想用自己编码风格时，将配置文件导入重启webstorm即可生效。

导出方法：File -> Export Settings ->自己选择选项和路径。用默认也可以。

导入方法：File -> Import Settings ->选择jar文件路径。

webstorm自带很多插件，你可以根据自己需要配置。我暂时未使用，如果你用到了，可以参考下面的一些文章。

首先第1步：Ctrl+; 快捷键，会出现一个蓝色光标，然后输入你要跳转的标签

第2步，全屏所有你刚才输入的标签都会高亮，并且在这个高亮的标签前面会出现相应的键盘字母，你按照相应提示的字母去敲击键盘就可以自动跳转了

以上就是关于前端开发常用哪些工具软件全部的内容，包括:前端开发常用哪些工具软件、为什么webstorm中搜不到汉化包插件、webstorm+vue怎么打apk包等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！