我的Atom

我的Atom

Atom官网提供了详细的功能介绍和使用文档,以及社区提供的插件和主题。也可以到Atom中文社区和Atom爱好者一起讨论。

不想折腾的同学强烈建议安装Nuclide

nuclide: A unified developer experience for web and mobile development, built as a suite of features on top of Atom to provide hackability and the support of an active community.

为Node和React Native提供了好用的调试功能,请到Nuclide官网查看详细的功能介绍和使用文档。

调试效果图:

Build-in Debugging

编辑器美化

atom-material-ui: A dark UI theme for Atom that follows Google’s Material Design Guidelines.

atom-material-syntax: A dark syntax theme for Atom that uses Google’s Material Design color palette.
atom-material-ui AND atom-material-syntax

atom-material-syntax-light: A light syntax theme for Atom that uses Google’s Material Design color palette.

atom-material-syntax-dark: A darker syntax theme for Atom that uses Google’s Material Design color palette.

MD大爱

file-icons: Assign file extension icons and colors for improved visual grepping.

图标如下:

全键盘操作2大利器

vim请略过。这2个插件面向不懂vim的开发者。

keyboard-scroll: Scroll like a boss (with your keyboard).

主要针对键盘没有翻页功能的Mac用户,使用快捷键滚动代码,可以自定义滚动行数。

jumpy: An Atom package that creates dynamic hotkeys to jump around files across visible panes.

随意调转到当前页面的任何位置,再也不需要鼠标啦!!!

自动补全

autocomplete-paths: Adds path autocompletion to autocomplete+.
autocomplete-paths

autocomplete-modules: Autocomplete for require/import statements.

Linter

linter: A Base Linter with Cow Powers.

linter-eslint: Lint JavaScript on the fly, using ESLint.

JavaScript开发可以参考Airbnb JavaScript Style Guide
React开发可以参考Airbnb React/JSX Style Guide

linter-stylelint: A plugin for Atom Linter providing an interface to stylelint.

CSS开发可以参考Airbnb CSS / Sass Styleguide

linter-json-lint: Lint json on the fly, using json-lint

代码美化

atom-beautify: Beautify HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, and SQL in Atom.

** Before **


** After **

CSS

autoprefixer: Prefix CSS and SCSS.

如果项目使用了构建工具(grunt, gulp, webpack),最好通过构建工具来做,而不是编辑器。比如webpack+postcss:入门webpack,看这篇就够了/CSS预处理器部分

JavaScript

atom-ternjs: JavaScript code intelligence for atom with Tern. Adds support for ES5, ES6 (JavaScript 2015), Node.js, jQuery & Angular. Extendable via plugins. Uses suggestion provider by autocomplete-plus.

js-hyperclick: A hyperclick provider that lets you jump to where variables are defined.

ES6+

language-babel: Babel JavaScript ES201x, React JSX & Flow Grammar & Transpiler.

React

react: React.js (JSX) language support, indentation, snippets, auto completion, reformatting.

React Native

atom-react-native-autocomplete: React-Native autocompletion for Atom text editor!

atom-react-native-css: Style React-Native components with css and built in support for SASS.

atom-xcode: Native iOS developers have amazing Xcode - let’s bridge the gap and make Atom our to go choice.

配合nuclide写RN真的有IDE的感觉,而且保留了编辑器优秀的代码编辑体验。

atom-xcode

Node.js

nodejs-snippets: atom nodejs snippets

language-ejs: EJS support for Atom.

命令行

terminal-plus: A terminal package for Atom, complete with themes and more.

正则表达式

regex-railroad-diagram: Display railroad diagram of regex under cursor.

API测试

rest-client: A simple REST client for your favorite editor.

卸载Postman吧!

注释和文档

docblockr: A helper package for writing documentation.

Git

git-plus: vim-fugitive like package for atom. make commits and other git things without the terminal

merge-conflicts: Resolve your git merge conflicts in Atom!

git-time-machine: Visually interact with git commit history for a file.

Atom自带的Git效果再加上这3个插件,大可以把GitHub Desktop, Tower, SourceTree等卸载啦。

浏览器

browser-plus: Real browser in Atom

拥有大显示器或者做手机Web开发的同学可以试试

open-in-browser: Simple package to open file in default browser

这个在写html和css的时候可以用用

Other

editorconfig: Helps developers maintain consistent coding styles between different editors.

todo-show: Finds all the TODOs, FIXMEs, CHANGEDs, etc. in your project.

rename-tabs: Rename tabs titles with previous directory. Consistent with Sublime Text Editor behavior.

不用为文件名相同而迷惑啦!这款插件将目录名添加到标签栏,最终标题变成这样啦:index.js - Home.

highlight-selected: Highlights the current word selected when double clicking.
highlight-selected

pigments: A package to display colors in project and files.
pigments

tool-bar: Package providing customisable tool bar.

同步设置

sync-settings: Synchronize package settings, keymap and installed packages.

强烈推荐安装使用。


阅读原文

9赞

好文啊!感谢推荐!

2赞

很多实用而有意思的插件,感谢!

1赞

哈,又发现一些更好的,等待更新哈。

建议把 terminal-plus 更换为 platformio-ide-terminal,platformio-ide-terminal 是上面 terminal-plus 的一个 fork,将 terminal-plus 自带的 Status Bar 移到了 Atom 的 Status Bar 上了,观感更好。

原文地址

@jysperm 为什么这篇文章我自己没法修改了?

1赞

可能是时间太久了

1赞