好用的前端代码编辑器_前端代码编辑软件

有哪些程序员必备的前端编辑器

工欲善其事，必先利其器，今天就来讲讲目前程序员常用的前端编辑器。

一、sublime Text3

1、简介

简洁，轻便，进可安装多种扩展，退作为一个简单的文本编辑器也不错，常作为前端页面调试工具之一，对于一些简单的项目，告别打开webstorm般卡顿感，功能满足日常开发所需。支持目前主流操作系统，支持编译功能且可在控制台看到输出，内嵌python解释器支持插件开发以达到可扩展目的。windows下载地址sublime国内下载链接。其它下载地址添加链接描述

2、安装

下载安装包以后，选择安装路径直接进行安装即可。

安装以后打开进行基本设置，以设置代码自动补全为例，按一下步骤进行：

选择“首选项->设置-用户”进到如下界面

加上这一句 ,“auto_complete”: true,“auto_match_enabled”：true
再保存关闭重启设置即可生效，像一些常用的设置都可以先设置好再进行编码往往可以起到事半功倍的效果。

3、快捷键

提高程序员效率必备的快捷键，目前sublime常用的快捷键如下：

  Ctrl+L 选择整行(按住-继续选择下行)

  Ctrl+KK 从光标处删除至行尾

  Ctrl+K Backspace 从光标处删除至行首

  Ctrl+J 合并行(已选择需要合并的多行时)

  Ctrl+KU 改为大写

  Ctrl+KL 改为小写

  Ctrl+D 选择字符串 (按住-继续选择下个相同的字符串)

  Ctrl+M 光标移动至括号内开始或结束的位置

  Ctrl+/ 注释整行(如已选择内容，同“Ctrl+Shift+/”效果)

  Ctrl+Shift+c转换为utf8

  Ctrl+R 搜索指定文件的函数标签

  Ctrl+G 跳转到指定行

  Ctrl+KT 折叠属性

  Ctrl+K0 展开所有

  Ctrl+U 软撤销

  Ctrl+T 词互换

  Tab 缩进 自动完成

  Shift+Tab 去除缩进

  Ctrl+F2 设置书签.

  F2 下一个书签

  Shift+F2 上一个书签

  shift+鼠标右键 列选择

  Alt+F3 选中文本按下快捷键，即可一次性选择全部的相同文本进行同时编辑

  Alt+. 闭合当前标签

  F6 检测语法错误

  F9 行排序(按a-z)

  F11 全屏模式

  Ctrl+Enter 光标后插入行

  Ctrl+Shift+Enter 光标前插入行

  Ctrl+Shift+[ 折叠代码

  Ctrl+Shift+] 展开代码

  Ctrl+Shift+↑ 与上行互换

  Ctrl+Shift+↓ 与下行互换

  Ctrl+Shift+A 选择光标位置父标签对儿

  Ctrl+Shift+D 复制光标所在整行，插入在该行之前

  ctrl+shift+F 在文件夹内查找，与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找

  Ctrl+Shift+K 删除整行

  Ctrl+Shift+L 鼠标选中多行(按下快捷键)，即可同时编辑这些行

  Ctrl+Shift+M 选择括号内的内容(按住-继续选择父括号)

  Ctrl+Shift+P 打开命令面板

  Ctrl+Shift+/ 注释已选择内容

  Ctrl+PageDown 、Ctrl+PageUp 文件按开启的前后顺序切换

  Ctrl+鼠标左键 可以同时选择要编辑的多处文本

  Shift+鼠标右键(或使用鼠标中键)可以用鼠标进行竖向多行选择

  Shift+Tab 去除缩进

  Alt+Shift+1~9(非小键盘)屏幕显示相等数字的小窗口
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

4、安装插件

由于packagecontrol.io容易被墙，访问不稳定，所以需要将Sublime Text安装插件的地址改为中文镜像的地址：

第一步：通过控制台安装插件代码，通过 ctrl+` 或 View > Show Console打开控制台，将Python代码粘贴到控制台，回车。

SUBLIME TEXT 3
下面展示一些 内联代码片。

import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.cn/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
var foo = 'bar';
1
2

第二步：修改Sublime Text插件channels，方法如下：

1、打开Package Control配置文件

2、修改或新增channels地址

{ "channels": [ "http://packagecontrol.cn/channel_v3.json" ] }
1

保存搞定！

5、其他

关于sublime其他功能，菜单等介绍，可以查阅官网或者官方文档。

二、Visual Studio Code

VisualStudio Code自问世以来，已成为代码编辑器中的后起之秀。作为一个功能强大且轻巧的免费软件，它具有强大的扩展社区，强大的智能提示，集成Git，快速diff。对于前端开发者而言，这款IDE自带emmet支持html/jade/css/less/sass/xml，是前端开发者利器之一。也是微软最好的产品之一。

1、安装

Visual Studio Code下载地址https://vscode.cdn.azure.cn/，下载完成后直接选择默认安装即可；
安装完成以后可以进行一些简单的配置，若想换成中文的，直接去拓展中安装Chinese插件。如图：

安装以后，重启即可生效；对于其他插件，安装方法同上。

2、Git集成

对于git项目，在vscode中会有强大的提示功能，修改文件后会左边会显示指示器，比如删除会显示红色，增加显示绿色，修改则显示蓝色。

并且对于多人合作的项目，图形化解决冲突能力也是首屈一指。若不习惯图形界面进行git操作，在vs中启用终端即可进行给i他命令行操作，如下图。其快速diff功能受到业界一致好评。

3、快捷键

vscode常用的快捷键如下：

4、前端开发必备插件

1.ESLint
2. Babel ES6/ES7
3. vue
4. javascript standard format
5. javascript(ES6) code snippets
6. Npm Intellisense
主要根据项目所需，安装一些必备的插件，可以极大的提高开发效率。

5、其他

vscode功能很强大，其他的智能补全功能以及代码片段功能，都是常用的开发技巧，掌握了这些，敲代码往往能够事半工倍。这些都是我们作为开发者需要慢慢去探索与发现的。