需要一款称手的编辑器

以下介绍的编辑器是跨平台, 无论是 Windows, 还是 Liunx, 甚至是 Mac, 都可以成为程序员称手的利器

Atom

开源。功能强大, 是 Github 团队推出的简洁编辑器, 自带 Node.js 环境。

下载地址

官网下载地址:Atom

官网下载地址下不下来点击以下链接下载:atom-amd64.deb AtomSetup.exe

安装插件

使用 Ctrl+, 调出设置页面, 在 install 中查询插件并安装。自带 Node.js 环境。部分插件支持自定义设置。

插件推荐

  • emmet => 前端开发者必备
  • atom-beautify => 格式化编程语言文件, 支持的语法较广, 如 PHPPythonRubyJavaC
  • atom-html-perview => html 文件实时预览
  • atom-minify => 压缩 HtmlCSS 文件
  • autoprefixer => CSS3 私有前缀自动补全插件
  • csscomb => CSS 属性自动排序
  • docblockr => 可以自动生成 PHPDoc 风格的注释
  • atom-ternjs => javascript 代码提示
  • autocomplete-paths => 引入文件时, 自动补全路径
  • language-markdown => markdown 文件语法高亮
  • language-vue => vue 文件语法高亮
  • logo-file-icons => 文件图标
  • markdown-scroll-sync => markdown 文件预览自动滚动
  • simplified-chinese-menu => Atom 简体中文语言包
  • vue-autocomplete => vue 文件代码自动提示
  • vue-format => vue 文件自动格式化
  • sync-settings => atom 插件备份(需要 Githunb Access Token 和 Gist Id)

Brackets

开源。功能强大, 是一个非常优秀的 WEB 设计和前端开发的源代码编辑器。当然也支持 CJavaPython 等编程语言。支持实时预览。自带 Node.js 环境。

下载地址

Brackets

官网下载地址下不下来点击以下链接下载:Brackets. Release.1.8.msi

Brackets. Release.1.8.64-bit.deb

安装插件

部分插件是使用国外源的, 很容易被墙的。所以系统最好要有个代理服务器, 这里推荐 高梯子

如何安装

最快速的安装 Bracket s 扩展的方法是使用扩展管理器( Extension Manager )– 直接在 Brackets 的工具栏选择 File > Extension Manager 即可。

修改界面语言

改成中文。 Debug->Switch Language

插件推荐

  • Emmet => 前端开发者必备
  • Autoprefixer => CSS3 私有前缀自动补全插件
  • CSScomb => CSS 属性自动排序
  • Brackets Icons => 为你的 Brackets 边栏添加文件图标
  • Brackets CSS Class Code hint => 输入 classid 时会出现 css 里面的 class/id
  • JS CSS Minifier => 压缩 JSCSS 文件
  • Beautify => 这个扩展可以让你的 HTMLCSSJavaScript 等代码格式化一致, 从而提升可读性
  • Simple To-Do => 使用 Simple To-Do 可以确保你不会忘记项目的任务。它允许你在 Brackets 中为每一个项目创建 TODO 列表。
  • Markdown Preview => Markdown 文件实时预览
  • Markdown Toolbar => Markdown 文件的快捷工具栏
  • JavaScript Globals => javascript 全局变量高亮
  • Brackets Vue => Vue 文件语法高亮

Sublime Text 3

非开源。功能强大, 可以编译 CJavaPython 等编程语言。 Liunx 下启动可以在终端输入 subl 。部分插件依赖于 Node.js

下载地址

官网下载地址:Sublime Text 3

官网下载地址下不下来点击以下链接下载:Sublime Text Build 3126 Setup.exe

Sublime Text Build 3126 x64 Setup.exe

安装插件

直接安装:

安装 Sublime text 3 插件很方便, 可以直接下载安装包解压缩到 Packages 目录(菜单->preferences->packages)

使用 Package Control 安装

安装 Package Control 组件

Ctrl+ 调出 console 粘贴以下代码到底部命令行并回车:

import urllib.request, os;
pf = 'Package Control.sublime-package';
ipp = sublime.installed_packages_path();
urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler()));
open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen('http://sublime.wbond.net/' + pf.replace(' ', '%20')).read())

重启 Sublime Text 3 。 如果在 Perferences -> package settings 中看到 package control 这一项, 则安装成功。 顺便贴下 Sublime Text2 的代码。

import urllib2, os;
pf = 'Package Control.sublime-package';
ipp = sublime.installed_packages_path();
os.makedirs(ipp) if not os.path.exists(ipp)
else None;
urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler()));
open(os.path.join(ipp, pf), 'wb').write(urllib2.urlopen('http://sublime.wbond.net/' + pf.replace(' ', '%20')).read());
print('Please restart Sublime Text to finish installation')

用组件安装插件的方法:

  1. 按下 Ctrl+Shift+P 调出命令面板
  2. 输入 install 调出 Install Package 选项并回车, 然后在列表中选中要安装的插件。

注意

国内使用 Sublime Text 3 , 经常可能遇到无法安装可用插件问题, 可 removePackage Control 重新安装下;如遇到连 Package Control 也无法安装, 则可以在别处拷贝一份关于 Package Control 的文件( Package Control.sublime-package )存放于 Installed Packages 目录之下即可

插件推荐

  • Emmet => 前端开发者必备
  • Autoprefixer => CSS3 私有前缀自动补全插件
  • CSScomb => CSS 属性自动排序
  • JsFormat => 一个 JS 代码格式化插件
  • Tag => 格式化 Html/Xml 代码
  • phpFormat => 格式化 php 代码
  • HTML-CSS-JS Prettify => 一款集成了格式化(美化)html、css、js 三种文件类型的插件, 依赖于 Node.js
  • Minify => 自动压缩 JSCSS 文件
  • ColorPicker => 颜色选择器
  • BracketHighlighter => 类似于代码匹配, 可以匹配括号, 引号等符号内的范围
  • SublimeCodeIntel => 代码自动提示
  • SublimeLinter => 用于高亮提示用户编写的代码中存在的不规范和错误的写法
  • DocBlockr => 可以自动生成 PHPDoc 风格的注释
  • ChineseLocalizations => 汉化 Sublime Text
  • MarkDownEditing => markdown 文件语法高亮
  • vue Syntax Highlight => vue 文件语法高亮

Visual Studio Code

微软开发的一款编辑器, 免费而且跨平台, 可以编写 CJavaPython 等代码, 在界面上与 Sublime Text 非常相似

下载地址

官网下载地址:VS code

安装插件

使用 Ctrl + Shift + X 调出安装插件界面

插件推荐

  • HTML Snippets => 超级实用且初级的 H5 代码片段以及提示
  • HTML CSS Support => 让 html 标签上写 class 智能提示当前项目所支持的样式
  • Debugger for Chrome => 让 vscode 映射 chrome 的 debug 功能, 静态页面都可以用 vscode 来打断点调试
  • vscode-icons => 让 vscode 资源树目录加上图标
  • Path Intellisense => 自动路劲补全, 默认不带这个功能的
  • Document this => js 的注释模板
  • ESlint => 代码规范性检查
  • vetur => vue 语法高亮
  • Git Easy => git 管理