前端入门编辑器 - HelloWorld开发者社区

前言

背景介绍

大家好！我是H少白，一名应届毕业生，2018年6月份就是结束我学业生涯的时候。其实刚进入大四我就对找工作充满了恐惧和不知所措，尤其是我的野心想在上海拥有自己的一片天，让我更加的焦灼。我开始思考自己的不足，思考如何面对面试官和如何在工作中干的漂亮让老板赏识。是的，我现在知道那时的我是多幼稚。因为我那时连一份简历都没做过，何谈下面的事。在今年10月份，我在前程无忧网投出了第一份简历，接下来就是第二份、第三份，一直到我投出了第50份，我觉得够了，应该会有很多公司来找我（投的简历都是关于机械和电气方面的）。然而我收到了5份面试通知，最后，只有一家电气公司给我发了offer。我应该高兴对不对，至少我有了一次工作的机会。但是我更加失落，不是因为薪资不好，而是我在这一个月内，跑遍了上海几所高校的招聘会，面试来了5家公司，我明白了公司与公司之间的差距，我不想在车间里“拧螺丝”或者在工厂里“接电线”，不想在上海过着一眼看到底的生活。我到上海有我对自己的要求和底线，如果就这么的过几年，那我不如回家在自家的一亩三分地里过一辈子。我打电话给正在复习考研的发小和已经工作的老同学。在和他们聊天的时候，他们告诉我：在没有毕业前找工作不要着急，如果转行可以试试互联网，反正我还有几个月的时间能去集中地学习。

自己决定学习前端是因为一家培训机构。当时我不知道自己学什么又对互联网行业一窍不通，才去了培训机构咨询。他们给我介绍了JAVA、C++、前端开发，也不知道为什么就觉得前端适合我，当时我就觉得跟随自己内心的选择会没错。就这么我决定学习前端开发。有了选择之后，就疯狂地网上找教程，大概找了一周左右的时间之后，有一个大概的方向了：决定先从最基础的html、css入手，然后在学习javascript相关的知识。

学习html、css得有一个编辑器，所以今天跟大家一起学习一下如何使用编辑器。

虽然刚从机械转到前端仅仅一周的时间，是名副其实的前端小白，但对于我从“拧螺丝”转行到“敲代码”这件事，其实我也是从刚开始的迷茫到最后的坚定。今天想要给大家分享的就是我的这段“如何打开前端大门”的经历，以及这一周来我学到的“前端入门编辑器”的知识（重点在知识）。

开始

我通过网上各种网页和大牛们的博客，选择了Sublime Text和Visual Studio Code两个编辑器。也是通过大牛的博客中开始学习对这两个编辑器初步的了解和简单的运行。希望和我一样刚刚踏入前端的同行们看到我写的文章会了解到编辑器。

一、了解sublime text:

对SublimeText的初步了解：sublime是一款跨平台编辑器，可经常切换系统使用。sublime是可扩展的（包含大量实用插件，可安装插件来提高效率）。

1.下载和安装sublime text:

直接上官网搜sublim text,点击下载。安装是傻瓜式安装，一直往下就ok了。

官网：http://www.sublimetext.com/

2.添加Sublime Text到环境变量

我的电脑”右键‘属性’----点击高级系统设置----环境变量---编辑path---增加系统变量SublimeText的安装目录(E:Sublime TextSublime Text3).

注意：变量名和变量值跟图片中的一致。

前端入门编辑器

接下来你就可以在命令行里面利用sub1命令直接使用Sublime Text了：
sub1 file :: 使用Sublime Text打开file文件
sub1 folder :: 使用Sublime Text打开folder文件夹
sub1 . :: 使用Sublime Text当前文件夹

3.安装Package Control

我安装的是Sublime Text3英文版，下面都是以这个版本为主。如果想下载中文版网上也有。推荐英文版。

使用Ctrl+`打开控制台粘贴下面的代码到控制台:

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; 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://sublime.wbond.net/' + 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)

等待PC下载完成，打开命令板ctrl+shift+p,输入PC应出现Package Control

前端入门编辑器

4.基本概念

标签（Tab）：无需介绍。
编辑区（Editing Area）：无需介绍。
侧栏（Side Bar）：包含当前打开的文件以及文件夹视图。
缩略图（Minimap）：如其名。
命令板（Command Palette）：Sublime Text的操作中心，它使得我们基本可以脱离鼠标和菜单栏进行操作。
控制台（Console）：使用Ctrl + `调出，它既是一个标准的Python REPL，也可以直接对Sublime Text进行配置。
状态栏（Status Bar）：显示当前行号、当前语言和Tab格式等信息。

前端入门编辑器

5.编辑（Editing）

5.1 基本编辑（Basic Editing）

Ctrl + Enter在当前行下面新增一行然后跳至该行；Ctrl + Shift + Enter在当前行上面增加一行并跳至该行。
http://i.imgur.com/rvzS9Ok.gif
Ctrl + ←/→进行逐词移动，相应的，Ctrl + Shift + ←/→进行逐词选择。
http://i.imgur.com/jFnTDl3.gif
Ctrl + ↑/↓移动当前显示区域，Ctrl + Shift + ↑/↓移动当前行。
http://i.imgur.com/v31pd3k.gif

5.2 选择（Selecting）

Sublime Text的一大亮点是支持多重选择——同时选择多个区域，然后同时进行编辑。

Ctrl + D选择当前光标所在的词并高亮该词所有出现的位置，再次Ctrl + D选择该词出现的下一个位置，在多重选词的过程中，使用Ctrl + K进行跳过，使用Ctrl + U进行回退，使用Esc退出多重编辑。

多重选词的一大应用场景就是重命名——从而使得代码更加整洁。尽管Sublime Text无法像IDE（例如Eclipse）那样进行自动重命名，但我们可以通过多重选词+多重编辑进行直观且便捷的重命名：

http://i.imgur.com/IRVbUTJ.gif

有时我们需要对一片区域的所有行进行同时编辑，Ctrl + Shift + L可以将当前选中区域打散，然后进行同时编辑：

http://i.imgur.com/0NHpXFl.gif

有打散自然就有合并，Ctrl + J可以把当前选中区域合并为一行：

http://i.imgur.com/hfRAyiy.gif

新建文件&保存预览

学习了上面的一些基础操作，我们可以简单的学习一下编写基础的html。

先在本地新建一个文件夹“FrontEnd”，然后在sublim text打开FronEnd，新建一个file编写代码。

前端入门编辑器

ctrl + s保存,使用chrome、firefox预览

前端入门编辑器

二、了解Visual Studio Code

安装

下载：https://code.visualstudio.com/
安装：傻瓜式直接安装

界面概述

前端入门编辑器

插件

Ctrl + Shift + P或 F1 打开扩展面板，输入 install 后按回车打开扩展安装面板；或点击侧边栏的最后一个按钮；或使用ctrl + shift + x命令打开；或使用查看->扩展打开扩展面板。

在对话框中输入[string ]@sort:installs可以根据下载量排序查看，选择所需插件，单击安装即可。

@sort:installs：根据下载量排序查看所有插件，asc 升序排列，desc 降序排列。

前端入门编辑器

推荐插件：

C/C++：添加C/C++支持，包括但不限于自动补全

Python：自动缩进，补全，查错，debug，代码格式化等等

beautify：格式化html，css，js

vscode-icons：一款很火的图标主题

HTML Snippets：可以在不输入 < 的情况下提示

View In Browser：在浏览器中打开 HTML 文件

Crane - PHP Intellisense：PHP代码的自动补全插件

jQuery Code Snippets：一款jQuery重度患者的插件

Debugger for Chrome：调试JavaScript

Git History：显示git log和line history

配置

Ctrl + Shift + P或 F1 打开命令面板(也可以使用查看->命令面板打开)；

输入user set后按回车打开用户配置；

使用"editor.fontFamily":"Consolas, 'Courier New', monospace"选择字体样式，默认为"Consolas, 'Courier New', monospace"；使用 editor.fontSize":14控制字体大小，默认为14；使用 "editor.wrappingColumn":0使文本自动换行，默认为300；在左侧的默认配置中会有详细的中文描述，配置文件是json格式的文本文档。

前端入门编辑器