實用的 atom 插件

時間 2019-11-17

標籤實用 atom 插件简体版

原文原文鏈接

實用的 atom 插件

sublime text 確實是前端開發的神器，但入坑三四年一直使用，不免會有些視覺疲勞，最近折騰起了atom編輯器，發現這貨也是前端開發的利器，沒錯，就是利器。

俗話說，人靠衣裝，佛靠金裝，再好的編輯器也不會在軟件自己集成各類插件，第三方支持等，因而就須要咱們針對本身的平常開發選擇一些經常使用的、實用的插件，最大程度的提升平常開發效率。

Ⅰ：atom 是什麼鬼

Atom 是github在2015年開源的一款編輯器，相比較於sublime text，最吸引人的莫過於 Atom 是基於 Chromium Embedded Framework，基本上就是個 web app，源碼都是 CoffeeScript 寫的，連界面均可以用 CSS 來自定義。

Atom 的擴展也是用 JS 或者 Coffee 在 Node + webkit 的環境下開發，而且可使用 npm 的包，這對於前端和 Node 開發者是頗有誘惑力的，須要的話徹底能夠把 Atom 打形成一個 IDE。

官網：atom官網，能夠在官網下載進行安裝，安裝過程很簡單，這裏就不進行贅述了。

Ⅱ：好用的 atom 插件

點擊菜單裏面的 Preferences（抑或使用快捷鍵 cmd + ,），點擊 install 選項，輸入要安裝的插件，點擊安裝便可。
經過 Preferences-install 來安裝插件常常會遇到問題，好在atom作的很人性化，咱們能夠經過終端來進行插件安裝，命令爲 apm，是否是有點眼熟，這個基於atom 的一個包管理器，他過這個命令能夠愉快的他過終端來安裝你想要的插件啦，是否是很方便

apm 安裝的方法以下：

# 安裝指定包 $ apm install <package_name> # 安裝指定版本的包 $ apm install <package_name>@<package_version> # 查找包 $ apm search <package_name> # 查看包更多詳情 $ apm view <packge_name> # 查看當前已安裝包(包含atom裏面自帶的一些包和你本身安裝的包) $ apm list

apm list 裏面我安裝的以下：

/Users/liucui/.atom/packages
├── activate-power-mode@0.5.2 ├── atom-beautify@0.29.7 ├── autocomplete-paths@1.0.2 ├── color-picker@2.1.1 ├── docblockr@0.7.3 ├── emmet@2.4.3 ├── file-icons@1.7.11 ├── git-plus@5.13.4 ├── javascript-snippets@1.2.1 ├── linter@1.11.4 ├── linter-jshint@2.1.0 ├── markdown-scroll-sync@2.1.2 ├── markdown-table-formatter@2.8.3 ├── minimap@4.23.5 ├── minimap-find-and-replace@4.5.1 ├── terminal-panel@1.14.1 └── vim-mode@0.65.1

那麼到底有哪些好用的、必備的插件呢，下面就來給你們推薦幾個所經常使用的。

一、emmet

前端開發都懂得的，html 代碼補全，使用方法還有文檔能夠查閱emmet使用文檔。

下載連接：emmet

二、file-icons

不一樣格式的文本現實不一樣顏色和類型的圖標，便於分辨。

下載連接：file-icons

另外：siti-ui 主題也能夠以不一樣的顏色和類型圖標展現不一樣類型文件，你們能夠下載試試。

三、color-picker

顧名思義，顏色採集器，很是清晰好用。快捷鍵 cmd+shift+code 啓動。

下載連接：color-picker

四、atom-beautify

美化格式插件，規範縮進，刪除多餘空行等等。快捷鍵 ctrl+option+b 啓動使用。

下載連接：atom-beautify

五、markdown-scroll-sync

atom 自帶markdown 預覽功能，快捷鍵 ctrl+shift+m會打開兩個面板的視圖，但文檔太長的時候，不會跟着同步滾動，這個插件就是作這個用的，滾動文檔的時候預覽內容同步滾動。

下載連接：markdown-scroll-sync

六、minimap

編輯器右側小面板，快捷展現當前編輯的內容在整個文檔中的位置。

下載連接：minimap

七、docblocker

便捷的添加註釋代碼，/** 按tab鍵即添加註釋代碼快。

下載連接：docblocker

八、terminal-panel

快速調取使用終端面板，快捷鍵『ctrl+`』啓動，底部工具條的 + 也能夠點擊展現終端面板。

下載連接：terminal-panel

九、javascript-snippets

js/nodejs 方法快捷輸入，不過有些方法的簡寫須要去文檔裏面熟悉一下，多用幾回你會發現真的能夠提升效率。

下載連接：javascript-snippets

十、autocomplete-paths

代碼提示補全插件，

下載地址：autocomplete-paths

十一、linter

代碼風格檢查工具

單單裝了linter 還不行，咱們要針對本身使用的語言不一樣去安裝不一樣的語言支持，例如，我裝了js的檢查工具：linter-jshint，你們能夠根據須要自行安裝，語言風格審查列表

下載連接：linter

十二、vim-mode

atom 的vim 模式，安裝後按ESC鍵即啓用vim 模式，在另外一篇文章編輯器的vim模式使用中，有詳細的介紹，讓你的 Atom 用起來超乎你的想象。

1三、activate-power-mode

這個插件純粹是用來炫技的，只適合拿來玩玩，長時間使用，我相信你的視力必定會降低的，不要怪我沒提醒你哦。

下載連接：activate-power-mode

Ⅲ：另附--經常使用快捷鍵

快捷鍵	說明
shift + cmd + p	命令版(能夠看到全部快捷鍵)
alt + shift + s	查看文件相關語言的代碼塊(snippet)
cmd + f	搜索當前文件
cmd+shift+f	搜索整個項目
alt + cmd + [	代碼摺疊, 我不喜歡用
alt + cmd + ]	代碼展開
cmd + /	快速註釋當前行
cmd + [	代碼左縮進
cmd + ]	代碼右縮進
cmd + b	快速跳轉打開的文件
alt+B或alt+left	光標按單詞左移
alt+F或alt+right	光標按單詞右移
cmd+right或ctrl+e	光標移動到行最右最後一個非空字符
cmd+left或ctrl+a	光標移動到行最左第一個非空字符
cmd + up	光標移動到文件頭
cmd + down	貫標移動到文件尾
ctrl + g	行跳轉, 語法爲行號:列號
cmd + r	按當前文件方法跳轉
cmd + t	全項目模糊查找關鍵字並跳轉
ctrl + m	按照括號匹配跳轉
cmd + F2或cmd+fn+f2	給某一行設置書籤顯示在行號右側

Ⅳ：後記

咱們經常會被一些慣用的東西束縛住，做爲一個開發者，要時刻提醒本身對新鮮事物充滿好奇，把眼界放寬，多看看外面的世界，走出去，你會發現，世界會是另外一個樣子。

Atom插件安裝及經常使用插件推薦

Atom是個不錯的文本編輯工具，也該能夠改形成IDE用，主要靠插件實現各類擴展功能。由於網絡環境的緣由，在線安裝不容易成功，通常選擇手動安裝。如下是我搜索網絡資源後總結的手動安裝方法。

Atom插件安裝

安裝前的準備

你須要安裝nodejs環境，其實主要是npm，包管理工具，並修改鏡像爲國內源

下載並安裝nodejs

下載並安裝nodejs，包括npm，以及Add to PATH。如圖：

修改鏡像

在用戶目錄下新建文件.npmrc
win用戶的用戶目錄是C:\Users\{username}
win用戶建立沒有名稱的文件方法是cd >.npmrc
編輯文件.npmrc添加內容
registry = https://registry.npm.taobao.org

安裝插件

找到你想要安裝的插件的github地址，如下以git-plus爲例子。如圖：
點擊會打開網頁：https://atom.io/packages/git-plus
點擊Repo打開插件的代碼在github上的託管地址
選擇release版本，並下載某一版本的安裝包。如圖：
解壓到~/.atom下，好比個人路徑是：C:\Users\{username}\.atom\packages，解壓後是：C:\Users\Administrator\.atom\packages\git-plus-5.25.1
打開命令行，並切換到這個插件的目錄下，執行命令npm install便可。如圖：
重啓Atom能夠看到已經安裝成功。如圖：

Atom插件推薦

如下是我常常用的插件，安裝方法同上，詳細用法請查看各個插件的文檔README.md

git

python

autocomplete-python

run

format

atom-beautify

一些好用且有趣的atom插件

2016-12-19 bubbi7

atom-plugins

some awesome atom-plugins !

...

1. emmet

html補全

2. active-power-mode

文字泡沫

3. power-mode

隨地泡沫

4. atom-miku

跳舞的姑娘

5. autocomplete-plus

當輸入的時候，提供可能的候選項。

5. atomic-chrome

chrome裏面的編輯框直接在atom編輯

6. minimap

源碼預覽圖，提供豐富的自定義選項

7. file-icons || file-icon-supplement

顯示文件類型對應的圖標。

8. atom-beautify

格式化代碼，更統一的代碼風格。

9. Color Picker

在編輯器裏面挑選顏色。

10. Editor-setting

給每一個語言獨立設置擴展和功能

11. atom-terminal-panel

atom內置命令行工具

12. Git

git-control git面板
git-controlhub git面板
open-gitub  在atom打開gitub

13. language-JavaScript-jsx

jsx擴展

14. markdown-preview-plus

markdown預覽

15. tool-bar

toolbar-iconshortcuts
tool-bar-atom
tool-bar-shortcut //功能豐富
tool-bar-shortcuts //能夠自選選項
左側工具欄

16. atom-html-preview

預覽lhtml頁面

17. vim-mode

atom添加vin模式

18. pigment

顏色代碼着色顯示（代碼指定的顏色）

19. autocomplete-modules

模塊名自動補全

19. php-server

給某個文件夾php服務器啓動

20. live-server

自動刷新的服務器

21. React

atom-react-preview  react預覽
react 語法支持
atom-react-native-autocomplete RN代碼補全

22. tree-view-git-status

文件夾git狀態

23. tree-view-background

文件欄背景圖

24. glowing-cursor

打字時候光標顏色

25. filecolor

文件名顏色

26. windows-context-menu

給windows添加打開快捷方式

27. open-in-browser

默認程序打開代碼

28. sound

keyboard-sound
typewriter-sound
敲代碼聲音

29. video-player

背景播放視頻

30. all-times-you-know

atom全局背景

31. hacker-news-background-titles

黑客新聞標題和打開連接（無文件打開狀態下在背景）

32. editor-background

背景圖片和視頻

33. server-script

同步/運行腳本到服務器

34. custom-title

給atom設置個性化標題

35. status-bar

line-count-status
move-status-items
status-bar-clock
battery-status
git-status
ctags-status //類，函數，做用域

36. menu-manager

頂部菜單管理

37. php-class-tree

php類和方法樹狀圖

38. Nuclide

Facebook的IDE

39. Script

在編輯器裏運行代碼

40. remote-edit

編輯服務器上的文件

41. remote-sync

同步服務器上的文件

42. remote-ftp

服務器文件的樹狀結構顯示

43. browser-plus

瀏覽器

44. preview-plus

瀏覽一切

45. open-in-browser

在瀏覽器打開

46. language-babel

jsx語法

47. games

atom-2048
snake
tetromino

48. markdown-preview && markdown-scroll-synic

將markdown-preview編輯區和預覽區同步滾動

49. markdown-writer

方便管理markdown裏的圖片和連接

50. markdown-table-format

格式化markdown的表格

51. atom-hexo

atom編輯器裏執行hexo命令寫博客

52. github-issure

github-issure幫助工具

53. github

github-user-dataip  顯示文檔裏github帳號的詳細信息
create-github-repo  建立github repository
my-github-profile  顯示本身github信息在狀態欄
github-notification 通知github消息
gist-it 快速分享代碼到gist.github.com(惋惜天朝用不了gist)

54. sourcerer

根據遇到的問題查找stackoverflow代碼片斷

55. ask-stack

在atom快速提問stackoverflow

56. debug

node-debugger
php-debug
python-debugger
swift-debugger
go-debug
...

57. file-header || header-42

給當前編輯文件添加用戶時間等頭部信息

58 atom-minify || uglify

js 代碼混淆

59. atom-bautifiy

美化一切代碼

60. atom-music

本地音樂播放器

61. musicBox

atomn內嵌listenvideo.com

62. youtube-pane || playyoutube

atom內嵌youtube

63. themed-settings

美化設置面板

64. markdown-themeable-pdf

markdown轉換成pdf,html,png，Atom，setting-->package install，搜package：markdown-themeable-pdf （markdown-pdf 很差用） atom markdown轉換PDF 解決AssertionError: html-pdf: Failed to load PhantomJS module 打開cmd，執行 npm install phantomjs-prebuilt 安裝好了重啓atom。

65. jupyter-notebook || note-book

atom內嵌notebook

66. markdown-scroll-sync

當markdown-preview時編輯框和預覽框同步

67. autocomplete-python

python代碼自動補全

68. javascript-snippets

輸入特殊的字符後自動擴展成對應的 Javascript 代碼片斷

69. go-to-line

跳轉到指定的行，只要 ctrl + g 後輸入行號便可

70. atom-ternjs

js,nodejs,es6補全

71. regex-railroad-diagram

正則表達式圖形化顯示

72. atom-shell-commands

自定義shell命令

73. advanced-open-file

經過 Cmd-Alt-O/Ctrl-Alt-O 快速的打開文件或新建文件，同時支持路徑補全

74. seti-ui

帶文件圖標的黑色主題

75. php-cx-fixer

運行php

76. git-log

圖形化git提交記錄

77. pretty-json

格式化json數據

78. drag-drop-text

用鼠標複製剪切粘貼文本

79. to-base64 | base64

文件轉base64

80. draw-on-image

截屏和編輯圖片

81. command-toolbar

個性化atom的各個按鈕命令

82. Encourage

atom來鼓勵你寫代碼

83. platformio-ide-terminal

又是一個很棒的terminal

84. platformio-ide-terminal

自動隱藏樹狀文件面板

85. slack-chat

slack的atom內置客戶端

86. atomic-game-engine

遊戲引擎

87. canvas-snippets

html5的canvas代碼片斷

88. draw-package

文件裏畫圖形

89. open-in-browsers

在安裝過的任意瀏覽器打開代碼

90. lunar-particle-ui | seti-ui

最漂亮的兩個主題

91. atom-monokai | monokai

最漂亮的兩個語法主題

查看原文：http://dyartstyle.com/?p=2167

分享幾個實用的ATOM插件，雖然ATOM打開大文件是硬傷，不過有這些插件用起來真的是很順手，大愛ATOM

一、atom-beautify Beautify HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, SQL, and more in Atom 二、atom-clock Display a customizable clock in the status bar. 三、atom-ctags better autocomplete for atom

四、atom-html-preview A live preview tool for Atom Editor. 五、atom-miku Miku能從你的代碼中獲得得到充能！六、atom-nodejs- snippet A Collection of Nodejs, Js snippet 七、atom-react-native-css Style React-Native components with css and built in support for SASS 八、atom-ternjs JavaScript code intelligence for atom with Tern. Adds support for ES5, ES6 (JavaScript 2015), Node.js, jQuery & Angular. Extendable via plugins. 九、atomic-chrome Edit Chrome text directly from Atom 十、autoclose-html Automates closing of HTML Tags 十一、autocomplete-ctags Autocomplete-plus provider for ctags 十二、autocomplete-java Autocomplete-plus provider for Java 1三、autocomplete-js-import Autocompletes commonjs and es6 import statements 1四、autocomplete-json Atom autocomplete+ plugin for semantic JSON completions 1五、autocomplete-modules Autocomplete for require/import statements 1六、autocomplete-paths Adds path autocompletion to autocomplete+ 1七、autocomplete-php Autocomplete-php is a PHP provider for autocomplete+ 1八、autocomplete-python Python completions for packages, variables, methods, functions, with their arguments. Powered by your choice of Jedi or Kite. 1九、autocomplete-xml Autocomplete+ provider for XML via XSD 20、color-picker Right click or press CMD-SHIFT-C/CTRL-ALT-C to open it. 2一、custom-title Set your own template for Atom’s title bar. 2二、docblockr A helper package for writing documentation 2三、editorconfig Helps developers maintain consistent coding styles between different editors 2四、emmet Emmet – the essential tool for web developers 2五、file-icons Assign file extension icons and colours for improved visual grepping 2六、filecolor Add color to filename 2七、git-plus Do git things without the terminal 2八、git-time-machine Visually interact with git commit history for a file 2九、glowing-cursor A glowing cursor based on muchWeb’s neon cursor 30、highlight-selected Highlights the current word selected when double clicking 3一、hyperclick Pluggable text-clicking UI for Atom 3二、javascript-snippets JavaScript & NodeJS Snippets for Atom 3三、jquery-snippets jQuery Snippets for Atom 3四、js-hyperclick A hyperclick provider that lets you jump to where variables are defined. 3五、jumpy An Atom package that creates dynamic hotkeys to jump around files across visible panes. 3六、language-babel JavaScript ES201x, React JSX, Flow and GraphQL Grammar. Babel Transpiler 3七、language-ejs EJS support for Atom. 3八、language-javascript-jsx JavaScript, ES6, ES7, React JSX, Flow, etc… by SubtleGradient of Facebook 3九、language-svg Atom language support for SVG 40、linter A Base Linter with Cow Powers 4一、linter-csslint Lint CSS on the fly, using csslint 4二、linter-eslint Lint JavaScript on the fly, using ESLint 4三、minimap A preview of the full source code. 4四、minimap-highlight-selected A minimap binding for the highlight-selected package 4五、node-debugger Debugger For Nodejs 4六、node-requirer Node-requirer lets you quickly add require/import statements to any files/node modules within your code! 4七、nodejs-snippets atom nodejs snippets 4八、pigments A package to display colors in project and files. 4九、platformio-ide-terminal A terminal package for Atom, complete with themes, API and more for PlatformIO IDE. Fork of terminal-plus. 50、preview Ultimate previewer of source code in Atom. 5一、preview-plus Preview Plus # Preview Any thing 5二、project-manager Project Manager for easy access and switching between projects in Atom. 5三、qolor An atom package to color your SQL queries! 5四、react React.js (JSX) language support, indentation, snippets, auto completion, reformatting 5五、react-es6-snippets React ES6 snippets for atom 5六、react-snippets Atom Snippets for React, React Router and Flux 5七、regex-railroad-diagram Display railroad diagram of regex under cursor. 5八、rest-client A simple REST client for your favorite editor 5九、run-in-browser Opens current html document in the default browser 60、svg-preview Live SVG preview 6一、svn Marks lines/files in the editor gutter/treeview that have been added, edited, or deleted since the last commit. 6二、sync-settings Synchronize package settings, keymap and installed packages 6三、tree-view-background Displays an image in the background of the Tree view. 6四、tree-view-git-status Show the Git repository status in the Atom tree-view

這就是本人經常使用的一些插件但願你們可以喜歡 ^^

經常使用Atom插件列表（持續更新...）

做者妞妞騎毛驢關注

2016.08.18 14:51* 字數 799 閱讀 34248評論 12喜歡 60

一、simplified-chinese-menu
二、tree-view-finder
三、minimap
四、linter和linter-jshint
五、linter-js-standard
六、git-plus
七、file-types和file-types-icon
八、emmet
九、autoclose-html
十、atom-ternjs
十一、atom-html-preview
十二、atom-bootstrap3
1三、Remote-FTP
1四、autocomplete-paths
1五、atom-beautify
1六、jquery-snippets
1七、autoprefixer
1八、color-picker
1九、activate-power-mode

一、simplified-chinese-menu

Atom的簡體中文語言包，完整漢化，兼容全部已發佈的版本Atom。

二、tree-view-finder

左邊菜單欄顯示方式，相似Mac OS下的finder。

01.tree-view-finder

三、minimap

相似sublim text右邊的代碼縮略圖。

四、linter和linter-jshint

該插件是用jshint來檢查代碼，想必你們都據說過jshint代碼檢查工具，它有一個配置文件.jshintrc，這個文件告訴jshint執行的檢查規則。經過jshint能發現代碼中存在的問題，能夠及時避免bug的發生。linter-jshint插件基於atom規則來使用jshint，該插件能夠在項目根目錄下新建一個.jshintrc來告訴檢查規則，也能夠不用建立此文件來進行代碼檢查。
注意：linter-jshint是依賴linter插件來使用的，也就是說必須先安裝linter插件；由於linter是一個粗糙的檢查，有不少針對專門項的代碼檢查，如linter-csslint、linter-php等等