摘要:開發者的終極配置原文作者原文鏈接根據多年以來不斷完善配置的經驗,決定這次給也來一個大改造。快捷鍵幫助開發人員在不同的編輯器之間保持一致的編碼風格。一組專注,用于優化現代開發生產力的命令集,目標是符合推薦的代碼規范。
JS/React 開發者的 Atom 終極配置
原文作者:Elad Ossadon
原文鏈接:The Ultimate Atom Editor Setup (+for JS/React)
根據多年以來不斷完善 Sublime Text 配置的經驗,決定這次給 Atom 也來一個大改造。這個過程花費了好幾個月的時間,但成果還是很卓有成效的,我現在非常滿意這份配置。
這份清單將分為實用工具和 React 專用,并涉及到快捷鍵綁定。
實用工具 atom-beautify可以在 Atom 中 美化 HTML,CSS,JavaScript,PHP,Python,Ruby,Java,C,C ++,C#,Objective-C,CoffeeScript,TypeScript,Coldfusion,SQL等。
快捷鍵:?+?+B
prettier-atom使用 Prettier 來格式化 JavaScript 代碼,配有強大的 ESlint 集成。
快捷鍵:?+?+F
atom-transposeAtom 的轉置更像是字符串翻轉。在 Sublime 可以將選中的兩個字符串進行交換,看起來更有用。
快捷鍵:?+T
case-keep-replace使用這個插件可以在替換文本的時候可以保留原來的命名風格。
快捷鍵:?+?+R
change-case一個可以快速改變當前選擇文本命名方式的工具。比如可以從 camelCase 轉換到 snake_case 等。
快捷鍵:?+K ?+C/S
copy-path可以靈活地復制文件路徑。
duplicate-line-or-selection重復選擇文本或者重復一行,跟 Sublime Text 的行為一致,Atom 可以重復一整行。
快捷鍵:?+?+D
editorconfig幫助開發人員在不同的編輯器之間保持一致的編碼風格。
file-iconsAtom 的文件特定圖標插件,便于區分不同文件類型。
git-plusVIM 風格的 git 插件,在沒有終端命令行的時候進行提交等其他 git 操作。
highlight-selected通過雙擊一個詞來高亮整個文件相同的詞。
local-history用于維護本地文件歷史的插件(對代碼文件進行更改的歷史記錄)。
project-manager輕松訪問所有項目,還能對項目特定設置和選項進行管理。
快捷鍵:?+?+P
atom-reveal-file-in-finder可以在工作區或者文件選項卡上打開文件到 Finder 上,快捷命令已經添加到 ?+?*+P 。
快捷鍵:?+?+P
relatedrelated 提供了訪問與當前打開的文件相關的文件的快速方式。 例如,在 .js 和 .spec.js 文件之間切換。
快捷鍵:?+?+ R
我的 JS 關聯配置 (Menu > Packages > Related > Edit related patterns):
"([^/]+)(?!.spec).js(x?)$": [ "tests/$1.spec.js$2#create", ] "tests/(.+).spec.js(x?)$": [ "$1.js$2", ]set-syntax
一種簡單的命令方式來設置當前文件語法,與 Sublime 類似。
快捷鍵:?+?+P
sort-lines排序/刪除重復行。
sublime-style-column-selectionalt +單擊跨行選擇文本塊,每行都有插入符號。
快捷鍵:?+Drag
tab-foldername-index可以替換 TAB 標簽內容的插件,在打開相同文件名的文件時保證更高的可讀性。
sync-settings跨 Atom 實例同步設置,鍵盤映射,用戶樣式,初始化腳本,代碼段和已安裝的軟件包。 我將所有設置備份到 Gist 并在工作/個人計算機之間進行同步。
toggle-quotes快速切換字符串的單引號和雙引號。
快捷鍵:?+?+’
atom-spotify2在 Atom 狀態欄中顯示在 Spotify 中當前播放歌曲。 不是必要的,但很有趣。
HTML/CSS/JS/React Specific Packages atom-ternjs使用 Tern 為 Atom 提供 JavaScript 代碼智能提示,支持 ES5,ES6,ES7,Node.js,jQuery,Angular等。
atom-wrap-in-tag為選擇的文本增加標簽。
快捷鍵:?+?+W
autoclose-html自動添加關閉標簽。
autocomplete-modules自動補全 require/import 聲明。
color-picker很厲害的顏色選擇器。
快捷鍵:?+?+D
docblockr更容易的方式寫文檔注釋。
使用方式: /**
一個大大提高 HTML 和 CSS 工作流程的插件。 關于 Emmet
emmet-jsx-css-modules適用于 css 模塊的 emmet 工具。 .foo 現在將擴展為 一組專注 ES6,用于優化現代 JavaScript 開發生產力的命令集, 目標是符合 Airbnb 推薦的代碼規范。 點擊跳到變量或者 import 定義,js-hyperclick 依賴于 hyperclick。 在項目文件中顯示顏色。 插件 Linter 為 eslint 提供 UI 接口,用于對 JavaScript 文件進行靜態檢查。 允許從 tree view 復制文件的相對路徑。 在 Atom 中快速使用 lodash 的代碼提示。 支持 JavaScript ES201x,React JSX,Flow和GraphQL語法。 React ES7 snippets for atom Jest 測試提示 文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。 轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/83256.html 摘要:本文作者王仕軍,商業轉載請聯系作者獲得授權,非商業轉載請注明出處。想知道我接下來會寫些什么歡迎訂閱我的掘金專欄或知乎專欄前端周刊讓你在前端領域跟上時代的腳步。
showImg(https://segmentfault.com/img/remote/1460000009407536?w=592&h=314);
共 2127 字,讀完需 4 分鐘。我本周讀到 1 篇比較有趣的文章叫做《Th... 摘要:在,是當之無愧的王者,贏得了與之間的戰爭,攻陷了的城池。于月發布了版本,這一版本為了更好的表現加入了渲染方式。前端框架這個前端框架清單可能是年疲勞的元兇之一。的創建者,目前在工作為尋找構建簡單性和自主配置性之間的平衡做了很大的貢獻。
春節后的第一篇就從這個開始吧~本文已在前端早讀課公眾號上首發
原文鏈接
JavasScript社區在創新的道路上開足了馬力,曾經流行過的也許一個月之后就過... 摘要:在年成為最大贏家,贏得了實現的風暴之戰。和他的競爭者位列第二沒有前端開發者可以忽視和它的生態系統。他的殺手級特性是探測功能,通過檢查任何用戶的功能,以直觀的方式讓開發人員檢查所有端點。
2016 JavaScript 后起之秀
本文轉載自:眾成翻譯譯者:zxhycxq鏈接:http://www.zcfy.cc/article/2410原文:https://risingstars2016... 摘要:前端的工作更具有挑戰性,方向更多樣化假設我今年要入前端開發的坑這里強調前端是因為,現在很多,安卓開發加入大前端的這個稱呼。安卓版微信在截稿之前是大概的版本最新是并且持續了年不變,據說是為了穩定。
作者:Jay(滬江開發工程師)本文為原創文章,轉載請注明作者及出處
不好意思,沒有像其他公眾號一樣趕著發文章,每年到這個時候總有一大波什么今年前端預測,技術框架預測什么的。我這次寫這篇文針對的... 摘要:前端的工作更具有挑戰性,方向更多樣化假設我今年要入前端開發的坑這里強調前端是因為,現在很多,安卓開發加入大前端的這個稱呼。安卓版微信在截稿之前是大概的版本最新是并且持續了年不變,據說是為了穩定。
作者:Jay(滬江開發工程師)本文為原創文章,轉載請注明作者及出處
不好意思,沒有像其他公眾號一樣趕著發文章,每年到這個時候總有一大波什么今年前端預測,技術框架預測什么的。我這次寫這篇文針對的...apm install atom-beautify prettier-atom atom-spotify2 atom-transpose case-keep-replace change-case copy-path duplicate-line-or-selection editorconfig file-icons git-plus highlight-selected local-history project-manager related set-syntax atom-reveal-file-in-finder sort-lines sublime-style-column-selection tab-foldername-index sync-settings toggle-quotes atom-wrap-in-tag atom-ternjs autoclose-html autocomplete-modules color-picker docblockr emmet emmet-jsx-css-modules es6-javascript js-hyperclick hyperclick pigments linter-eslint tree-view-copy-relative-path lodash-snippets language-babel react-es7-snippets atom-jest-snippets one-dark-ui dracula-theme
相關文章
前端周刊第55期:10X 程序員?
2016-JavaScript之星
(譯 & 轉載) 2016 JavaScript 后起之秀
聽說2017你想寫前端?
聽說2017你想寫前端?
發表評論
0條評論
閱讀 4152·2023-04-26 02:40
閱讀 2655·2023-04-26 02:31
閱讀 2746·2021-11-15 18:08
閱讀 568·2021-11-12 10:36
閱讀 1425·2021-09-30 09:57
閱讀 5192·2021-09-22 15:31
閱讀 2626·2019-08-30 14:17
閱讀 1269·2019-08-30 12:58