需要一款称手的编辑器

以下介绍的编辑器是跨平台,无论是 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

安装插件

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

如何安装

最快速的安装 Brackets 扩展的方法是使用扩展管理器(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 管理
亲!!! 听说给作者打赏一杯咖啡钱,会给自己带来好运哦!