js代碼對齊工具（對齊代碼快捷鍵）

本文目錄一覽：

• 1、怎麼讓JS文件代碼對齊
• 2、2019年27個神奇的VSCode工具
• 3、mac系統下怎樣利用好sublime text 2編寫html，css，js代碼

怎麼讓JS文件代碼對齊

下載插件：打開Notepad++ ，然後 插件 — Plugin Manager — Show Plugin Manager

安裝插件：找到 JsTool ，選中，然後點擊Install按鈕，自動下載安裝，重啟Notepad++

使用插件：在插件選項裏面會多出一個JSTool選項，選擇JSFormat就可以格式化對齊了！效果還不錯。

2019年27個神奇的VSCode工具

Visual Studio Code（更簡稱為 VS代碼 ）是一個輕量級但功能強大的跨平台源代碼編輯器，可在桌面上運行。內置支持TypeScript和Chrome Debugger等開發工具，我很快就愛上了編輯器，我用它來構建我的項目。

誰 不 喜歡可供公眾使用和貢獻的bajillion開源擴展？

如果您正在尋找更多工具添加到您的開發工具包中，我希望本文可以幫助您找到一個新的工具來採用！

並非所有 這些工具都 專門針對JavaScript語言 ，而是針對您和我這樣有共同興趣的 JavaScript開發人員的 工具。 作為一名JavaScript開發人員 ，我將分享在幾個方面增強我的開發流程的內容，這些方面圍繞着人類五感中的五分之一。

以下是2019年針對JavaScript開發人員的26個神奇VS代碼工具

排在第一位的是我最喜歡的Project Snippets – 源自VS Code中內置的原始 用戶代碼段 。

如果您不熟悉用戶代碼段，基本上此功能允許您創建自己的代碼段以在整個項目中重複使用。

但究竟是什麼意思「重複使用」它們呢？

好吧，如果您經常發現自己編寫任何類型的樣板，如下所示：

實際上，你可以直接將其打入你的用戶片段，這樣你就不需要寫出（或複製並粘貼）整個事物，你只需要輸入一個自定義 前綴 來生成你配置它的片段。如果轉到「 文件」「首選項」「用戶代碼段」 ，則可以選擇通過單擊「 新建全局代碼段文件」 來創建新的全局代碼 段 。

例如，要為TypeScript React項目創建自己的 代碼段文件 ，可以單擊 New Global Snippets File ，鍵入 typescriptreact.json ，它將引導您到新創建的.json文件，您可以將其用於使用TypeScript構建的反應應用程序。

例如，要從上面的代碼示例創建用戶代碼段，您可以這樣做：

有了這個，你可以創建一個.tsx文件，輸入前綴，rsr並出現一個生成片段的建議。按彈出窗口上的 選項卡 將生成以下代碼段：

但是問題在於，這將持續存在於 所有項目中 （在某些情況下，這些 項目 對於一般的片段來說可能是強大的）。某些項目的配置略有不同，當您需要區分特定用例時，配置代碼段的全局文件開始成為問題。例如，一個用例是每個項目的項目結構不同：

對於具有該特定文件/文件夾結構的項目，這可能已足夠，但如果您正在處理Link組件具有類似路徑的另一個項目，該components/Link怎麼辦？

注意三個 邊界測試 如何用單引號將它們的值包裝起來：border: ‘1px solid red’。這在JavaScript中是完全有效的，但如果您使用樣式組件作為項目的樣式解決方案呢？語法不再適用於該工作空間，因為樣式化組件使用常規CSS語法！

這就是Project Snippets開始閃耀的地方！

如果你喜歡在代碼之間編寫注釋，那麼你有時可能會發現搜索過去編寫的某些文檔的位置有點令人沮喪，因為代碼有時會變得有點擁擠。

通過更好的評論，您可以通過介紹彩色評論使您的評論更加明顯：

現在，您可以更好地提醒您的團隊成員，!或者?引起他們的注意:)

我第一次看到這個擴展的屏幕截圖時，我知道我必須採用並將此權利引入我的開發工具包中。編碼是我的熱情，激情應該是有趣的。所以有了這種心態，這絕對有助於我享受我喜歡做的事情。

一個快速有趣的事實是，有時多一點顏色可以幫助加快發展流程，因為它可以影響血液流動和喚醒。換句話說 – 您 不僅 可以獲得 娛樂 ，還可以通過為您的工作流程添加顏色來改善您的 健康 狀況！

Material Theme是一個史詩般的主題，您可以直接安裝到VS代碼中，使您的代碼如下所示：

這必須是有史以來最好的主題之一。我不確定如何詳細說明主題是多麼棒，但這真是太棒了。立即安裝並與我一起努力將世界變成一個物質主題世界！（或者不要加入我，只使用主題。這也很酷）

如果您是TypeScript用戶：由於TSLint背後的支持者宣布計劃在今年某個時候棄用TSLint，您應該開始考慮移動tslint配置以使用ESLint + TypeScript配置方法。

項目逐漸採用@ typescript-eslint / parser和相關軟件包來確保其項目的面向未來的設置。您仍然可以使用新設置來充分利用ESLint的大多數規則和兼容性。

對我來說，由於多種原因，stylelint在我的所有項目中都是必須的：

現在我不確定你或其他開發人員在為他們的項目進行頭腦風暴時喜歡做筆記，但我喜歡用降價格式寫下筆記。

首先，我很容易理解。還有大量的工具可以幫助促進寫下降記錄文本的過程，包括markdownlint。Markdownlint是一個vs代碼擴展linter，可以幫助您在.md文件中進行樣式檢查。更酷的部分是它支持 更漂亮的格式化 ！

此外，我個人喜歡在我的所有項目上安裝Docsify，因為它支持每個項目的降價和其他增強功能。

我習慣在我的應用程序代碼中編寫待辦事項，因此像TODO Highlight這樣的擴展對於突出我在整個項目中設置的待辦事項非常有用。

Import Cost是第一次嘗試時變得非常有用的工具之一。但過了一段時間，你開始意識到你不再需要這個工具了，因為它會告訴你一段時間內你已經知道的東西。儘管如此，請嘗試使用此工具一段時間，因為您可能會發現它很有用。

Sometimes it can get frustrating trying to match the other end of a tag. That’s where Highlight Matching Tag becomes to take your frustrations away:

說到挫折，有時候回到音樂播放器切換音樂然後不得不回到vs代碼繼續做你正在做的事情會讓人感到沮喪。這就是vscode-spotify的用武之地，因為它允許你在內部和代碼中使用spotify！

使用此擴展程序，您將能夠在狀態欄中看到當前正在播放的歌曲，通過按熱鍵切換歌曲，單擊按鈕來控制spotify等等！

GraphQL 一直在不斷發展，因為我們開始在JavaScript社區的每個角落看到它。如上所述，如果您尚未考慮在處理GraphQL語法時從語法高亮，linting和自動完成功能中受益，那麼開始考慮將VSQL的GraphQL安裝到您的vs代碼中可能是一個好主意。

我個人經常使用GatsbyJS，因此我的日常編碼生活涉及閱讀GraphQL語法。

與上面的 突出顯示匹配標記 類似的原因。如果您無法通過縮進找到自己的方式，那麼Indent Rainbow可以幫助您更輕鬆地閱讀這些縮進。

這是一個例子：

這是其中一個擴展，其中 每個人都 問我「你從哪裡得到的？」 如果他們還沒有遇到這個擴展。基本上，Color Highlight有助於突出顯示代碼中的顏色，如下所示：

Color Picker是一個vscode擴展，為您提供圖形用戶界面，以幫助您選擇和生成CSS顏色符號等顏色代碼。

我第一次閱讀REST Client並親自試用它，它似乎不是像Postman這樣的老軟件的有用工具。

但是我使用REST Client擴展的次數越多，我就越意識到它會對我的開發工具產生多大的影響，特別是在測試API時。

您可以創建一個新文件並使用以下一行：

創建HTTP GET請求所需要做的就是突出顯示一行，轉到命令面板（CTRL + SHIFT + P），單擊 Rest Client：Send Request ，它將繼續並彈出一個新選項卡在一秒鐘內請求響應詳細信息。

很有用：

您甚至可以將參數或請求正文數據傳遞給POST請求，下面只需要幾行代碼：

這將使用body參數發出POST請求 { “email”: “someemail@gmail.com”, “password”: 1 }

我討厭不得不手動寫下我在開發工具中使用的擴展筆記的降價列表，並將其保存在像Evernote這樣的筆記服務中，直到Settings Sync拯救。

基本上，你只需要一個gist / github帳戶，每次你想要保存你的設置（這包括鍵綁定，片段，擴展等）你只需要按 SHIFT + ALT + U 將 私人 設置上傳到你的吉斯帳戶，所以下次登錄或重新格式化到另一台計算機時，您可以通過按 SHIFT + ALT + D 立即下載您的設置。

Todo Tree將幫助您在整個應用程序代碼中找到您創建的所有待辦事項到一個樹中，您可以在面板的左側一次查看它們：

Toggle Quotes是一個有趣的實用程序擴展，可讓您在引號之間切換。當您即將使用字符串插值時需要切換到反引號時，它會派上用場，特別是當更漂亮的習慣是將字符串美化為單引號時。

您可以在不使用Better Align首先選擇代碼的情況下對齊代碼。

要使用：將光標放在要對齊的代碼中，然後使用 CTRL + SHIFT + P （或任何您自定義的快捷方式打開命令調色板）彈出命令調色板並調用 Align 命令。

自從我第一次啟動VS代碼以來，Auto Close Tag一直對我很有用。它允許你輸入類似的東西p，按下斜線/，它將為你完成最後一個箭頭。這是默認情況下不在vs代碼中的東西，對我來說非常有用:)

當我的數組沒有按字母順序對齊時，我有一種令人沮喪的習慣，就是變得沮喪。幸運的是，Sort Lines等工具可以讓我的生活更輕鬆。如果你以類似的方式感到沮喪，你可能會發現這對你很有幫助。

我可能是唯一一個發現這個有用的人，但是VScode Google Translate幫助我完成了我的項目，因為我參與了一個多語言的項目。如果您不想離開編輯器，這很有用。

Prettier是vs代碼的擴展，可自動格式化您的JavaScript / TypeScript /等。代碼使用更漂亮。

我更喜歡Material Icon Theme而不是其他圖標主題，因為對於哪些文件類型來說，它更明顯，尤其是在黑暗主題中工作時。

HTML中的CSS類名稱的IntelliSense是基於HTML class屬性的CSS類名稱完成，該屬性基於工作區中的定義。

Path Intellisense是一個vs代碼擴展，可以為您自動填充文件名。

我希望這有助於您找到新的東西添加到您的開發套件中！

mac系統下怎樣利用好sublime text 2編寫html，css，js代碼

首先自身的編碼功力得過硬，至於使用工具的目的無非就是為了更快更高效更省事而已；

想要使用sublime text更快速的編碼，就必須要使用它的一些插件及快捷鍵了：

1安裝方法一：直接安裝

安裝Sublime text 3插件很方便，可以直接下載安裝包解壓縮到Packages目錄（菜單-preferences-packages）。

2安裝方法二（推薦使用）：使用Package Control組件安裝

也可以安裝package control組件，然後直接在線安裝：

按Ctrl+` 調出console（註：安裝有QQ輸入法的這個快捷鍵會有衝突的，輸入法屬性設置-輸入法管理-取消熱鍵切換至QQ拼音）

粘貼以下代碼到底部命令行並回車（sublime text 3）：

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( ” + pf.replace(‘ ‘,’%20’)).read()) 然後重啟。如果在Perferences-package settings中看到package control這一項，則安裝成功。

粘貼以下代碼到底部命令行並回車（sublime text 2）

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( ” +pf.replace( ‘ ‘,’%20’ )).read()); print( ‘Please restart Sublime Text to finish installation’)

用Package Control安裝插件的方法：

按下Ctrl+Shift+P調出命令面板

輸入install 調出 Install Package 選項並回車：

（1）Zen Coding (又稱Emmet)

該插件的作用為快速編寫html及css。

（2）jQuery Package for sublime Text

如果你離不開jQuery的話，這個必備～～

（3）Sublime Prefixr

Prefixr，CSS3 私有前綴自動補全插件，顯然也很有用哇

（4）JS Format

一個JS代碼格式化插件。

（5）Sublime Alignment

用於代碼格式的自動對齊。傳說最新版Sublime 已經集成。

（6）JsMinifier

該插件基於Google Closure compiler，自動壓縮js文件，可使js文件變的更小

（7）Sublime CodeIntel

代碼自動提示

（8）Bracket Highlighter

類似於代碼匹配，可以匹配括號，引號等符號內的範圍。

（9）Git

該插件基本上實現了git的所有功能，在實際開發使用Git時方便使用

主要快捷鍵列表：

Ctrl+L 選擇整行（按住-繼續選擇下行）

Ctrl+KK 從光標處刪除至行尾

Ctrl+Shift+K 刪除整行

Ctrl+Shift+D 複製光標所在整行，插入在該行之前

Ctrl+J 合併行（已選擇需要合併的多行時）

Ctrl+KU 改為大寫

Ctrl+KL 改為小寫

Ctrl+D 選詞 （按住-繼續選擇下個相同的字符串）

Ctrl+M 光標移動至括號內開始或結束的位置

Ctrl+Shift+M 選擇括號內的內容（按住-繼續選擇父括號）

Ctrl+/ 注釋整行（如已選擇內容，同「Ctrl+Shift+/」效果）

Ctrl+Shift+/ 注釋已選擇內容

Ctrl+Z 撤銷

Ctrl+Y 恢復撤銷

Ctrl+M 光標跳至對應的括號

Alt+. 閉合當前標籤

Ctrl+Shift+A 選擇光標位置父標籤對兒

Ctrl+Shift+[ 摺疊代碼

Ctrl+Shift+] 展開代碼

Ctrl+KT 摺疊屬性

Ctrl+K0 展開所有

Ctrl+U 軟撤銷

Ctrl+T 詞互換

Tab 縮進 自動完成

Shift+Tab 去除縮進

Ctrl+Shift+↑ 與上行互換

Ctrl+Shift+↓ 與下行互換

Ctrl+K Backspace 從光標處刪除至行首

Ctrl+Enter 光標後插入行

Ctrl+Shift+Enter 光標前插入行

Ctrl+F2 設置書籤

F2 下一個書籤

Shift+F2 上一個書籤