點擊關(guān)注公眾號，回復(fù)”登錄碼” 

即可獲取專屬Dooring賬號

?

作為前端開發(fā)，工作中最常使用的編輯器就是VSCode，但是你有比較深入地去發(fā)掘過VScode的各種開發(fā)配置嗎？本文介紹了一些簡單但是卻能明顯提高前端開發(fā)效率的配置&tips

?

一、VSCode快捷鍵

?

Mac相比較于Window的一大優(yōu)勢就在于，它有著豐富的快捷鍵操作，僅僅依靠鍵盤（而不用分出手去動觸控板/鼠標(biāo)）就能完成很多操作，從而帶來辦公效率的提升。同樣，對于VSCode，善用好快捷鍵，可以實現(xiàn)：「減少鼠標(biāo)操作 = 節(jié)省時間 = 不會消耗耐心 = 提高效率」

?

1.文本編輯

shift + command + k          #刪除當(dāng)前行：command + backspace          #刪除光標(biāo)前所有字符
command + option + up/down   #光標(biāo)同時選中多行shift + left/right/up/down   #選中字符option + 左/右鍵              #移動到單詞最左/右側(cè)command + up/down            #跳轉(zhuǎn)到頂部、底部
option + 上/下鍵           #將當(dāng)前代碼移動到上/下一行shift + option +up/down   #復(fù)制當(dāng)前行到上方/下方

command + k，然后再按下 command + J # 展開所有代碼行command + k，然后再按下 command + 0 # 折疊所有代碼行
alt + z                   #自動換行shift + option + F        #格式化所有代碼command + K command + F   #格式化選中代碼

2.視圖管理

command + shift + n #新建窗口command + 1/2/3     #選中不同的拆分欄command + b         #打開、關(guān)閉側(cè)邊欄ctrl + ~            #打開關(guān)閉控制臺

3.文件相關(guān)

command + n          # 新建文件command + shift + f  # 全局查找command + p          # 快速打開最近打開的文件ctrl + r             # 快速打開最近打開的文件夾/項目

4.設(shè)置相關(guān)

command + ,    # 打開設(shè)置面板

「如何打開setting.json文件」

command + p，然后輸入一個>前綴，然后再輸入setting.json（或者其它設(shè)置中的選項均可），即可顯示出對應(yīng)的選項

順帶擴展一下，command + p之后輸入一個?，可以顯示出支持的所有操作

二、自動格式化&修復(fù)

1. formatter自動格式化

在settings.json（工作區(qū)的或用戶的皆可）中添加

{  "editor.formatOnSave": true,}

通過設(shè)置保存時自動格式化之后，搭配上「Prettier 插件」或者「VSCode默認的語言功能」，就能夠?qū)崿F(xiàn)保存時自動根據(jù)對應(yīng)的規(guī)則進行代碼格式的修復(fù)。但是僅靠當(dāng)前的設(shè)置， 「ESLint/StyleLint 的規(guī)則還無法在保存時自動進行修復(fù)」！

2. Lintter自動修復(fù)

不知道你是否遇到過這樣的場景：

在代碼中先后import了不同的對象，然后在對象下面就多了一條黃線，鼠標(biāo)放上去就顯示

然后你點擊【快速修復(fù)】，這一行代碼黃線是消失了，但你往下一看，還有一條黃線

于是你又需要精準地把光標(biāo)移動到黃線上面，等待1秒，出現(xiàn)提示框，然后點擊【快速修復(fù)】

如果只是一兩個，問題還不大。但現(xiàn)實往往是一個文件中經(jīng)常會從外部引入大量的對象。然后你不管，看著黃線難受；管吧，又浪費了大量時間做這個工作！

但實際上，通過一條VSCode配置，就可以實現(xiàn)一鍵修復(fù)所有的lint規(guī)則錯誤！

要讓各種Lintter在保存時能夠自動進行修復(fù)，需要在settings.json中找到editor.codeActionsOnSave這個配置項進行配置

{  "editor.codeActionsOnSave": {    "source.fixAll.stylelint": true,    "source.fixAll.eslint": true  }}

3. 不同類型文件使用不同規(guī)則

「默認格式化程序」，可以選擇VSCode自帶的語言功能，或者如Prettier這樣的格式化工具

首先是格式化工具的配置，這個可以編輯器，【右鍵】-【使用...格式化文檔】-【配置默認格式化程序】進行設(shè)置

設(shè)置后同樣會保存在settings.json文件中。

「對于各種Lintter工具」，則需要到各自的配置文件中進行配置，例如：

{  "overrides": [        {            "files": [                "**/*.vue"            ],            "customSyntax": "postcss-html"        },        {            "files": [                "**/*.less"            ],            "customSyntax": "postcss-less"        }    ],}

三、自定義snippets

參考文章：一個案例學(xué)會 VSCode Snippets，極大提高開發(fā)效率 - 知乎 (zhihu.com)

在VSCode輸入一些常用的函數(shù)名時，有時可以看到會彈出一些選項，然后選中就可以快速填充代碼。效率很高。

但是這些都是VSCode默認的填充內(nèi)容，如果我們想要自己定制一些可填充的代碼段可以嗎？答案是可以的！接下來先來看兩個使用案例：

使用示例

「使用案例一」

如圖，新建vue文件后，輸入一個vue，彈出選項，選中然后自動填充預(yù)置的代碼。

「使用案例二」

在vue的SFC中的標(biāo)簽內(nèi)部，輸入try，彈出選項，選中自動填充預(yù)置的代碼段。

配置方法

打開VSCode - 【文件】 - 【首選項】 - 【配置用戶代碼片段】

然后，它會彈出一個窗口，讓你選擇配置的文件，配置范圍有多種：global、project、language。（「language的使用范圍有限，比如vue.json設(shè)置的，無法在vue的SFC的scipt標(biāo)簽內(nèi)部使用」）

接著，VSCode生成了一個vue.json文件，還給出了使用 「介紹」 和 「Example」，（相信看了這么通俗易懂的介紹，不會還有人不會用吧）

最后，保存，再切換到.vue文件中，輸入vue，「注意：這里只有在頂層輸入有效！在script標(biāo)簽內(nèi)輸入是無法觸發(fā)的！」 。所以最大的作用是用來初始化文件代碼

四、推薦插件

• koroFileHeader，自動生成代碼文件頭注釋，函數(shù)注釋

• GitLens，強大的Git圖形化工具
• Auto Rename Tag，自動重命名配對的HTML/XML標(biāo)記
• outline-map，可視, 可互動的大綱地圖，如下圖

• change-case，轉(zhuǎn)換命名風(fēng)格，例如從camel（小駝峰）轉(zhuǎn)成Pascal（大駝峰）

五、同步VSCode配置

這里提供了github和本地兩種方式，推薦github（存在云端隨時隨地獲?。卿浺幌耮ithub并授權(quán)，然后按照提示一步一步完成即可。

六、settings.json

settings.json文件就是VSCode所有設(shè)置保存的地方。

• Default Settings（JSON），「默認，全局用戶共享」
• User Settings（JSON），「當(dāng)前用戶」。設(shè)置面板中的（用戶）設(shè)置就對應(yīng)這個文件，所有的修改都在該文件中生效
• Workspace Settings（JSON），「工作區(qū)」

分別代表了不同的影響范圍。「優(yōu)先級關(guān)系」：「工作區(qū) > 用戶設(shè)置 > 默認設(shè)置」，當(dāng)有相同項時，前者覆蓋后者

七、.editconfig

1. EditorConfig是什么

幫助開發(fā)人員在不同的編輯器和IDE之間定義和維護一致的編碼樣式，統(tǒng)一編碼風(fēng)格的配置文件。

EditorConfig一般以.editorconfig文件的形式存在，并且還需要搭配插件才能在IDE（如VSCode）中使用，以下是一個文件示例

# top-most EditorConfig fileroot = true
# Unix-style newlines with a newline ending every file[*]end_of_line = lfinsert_final_newline = true
# Matches multiple files with brace expansion notation# Set default charset[*.{js,py}]charset = utf-8
# 4 space indentation[*.py]indent_style = spaceindent_size = 4
# Tab indentation (no size specified)[Makefile]indent_style = tab
# Indentation override for all JS under lib directory[lib/**.js]indent_style = spaceindent_size = 2
# Matches the exact files either package.json or .travis.yml[{package.json,.travis.yml}]indent_style = spaceindent_size = 2

如上：

• .editorconfig文件頂部，必須寫上root = true（文檔中是這么解釋的：Set to true to stop .editorconfig files search on current file.）

?

如果到達根文件路徑或找到root=true的editorconfig文件，則將停止搜索.editorconfig文件。

?

• 使用通配符，可以針對不同類型的文件使用不同的編輯風(fēng)格（下面的內(nèi)容覆蓋上面）
• .editorconfig文件的注釋以#開頭，必須單獨放在一行，不能放在行尾
• .editorconfig文件本身必須是UTF-8編碼

2. path匹配規(guī)則

3. 配置項

以下列舉可以配置的項目

indent_style  # 縮進風(fēng)格，tab或spaceindent_size   # 每個縮進單位的列數(shù)，當(dāng)它被設(shè)置為tab時，將使用tab_width的值（如果tab_width指定了的話）tab_width   # 一個tab制表符代表的列數(shù)，默認為indent_size的值，通常不需要指定。trim_trailing_whitespace  # 刪除換行符之前（即行尾）的任何空白字符，true 或 falseinsert_final_newline    # 用一個空白行結(jié)束文件，true 或 falseend_of_line   # 行尾用什么符號結(jié)束，lf、cr、crlfcharset     # 規(guī)定文件的字符集，utf-8、utf-8-bom、utf-16be、utf-16le、latinlroot      # 在文件頂部聲明的屬性，如果設(shè)置為true，則編輯器對EditorConfig文件的搜索到這個文件停止

• 沒有在.editorconfig文件中配置的項，將使用IDE默認的配置
• 將指定項設(shè)置為unset，可以清除所有之前的.editorconfig對它的設(shè)置，從而使用IDE默認值
• 通常一些配置項是不用指定的。比如指定了indent_style = tab之后，就不用再指定indent_size這個配置了

在 EditorConfig Properties · editorconfig/editorconfig Wiki (github.com) 中還介紹了一些擴展的配置項（但是EditorConfig表示并不想標(biāo)準化它們，不過可以使用），下面列舉一些常用的：

quote_type    # 字符串的引號類型（限于支持多種引用符號的語言），single、double、auto
curly_bracket_next_line # 左側(cè)大括號 { 是否要另起一行，true/falsespaces_around_brackets  # 大括號{}前后是否加空格，none、inside、outside、bothspaces_around_operators # 運算符前后是否加空格，true、false、hybridindent_brace_style    # 縮進風(fēng)格，K&R、Allman、GNU、Horstmann等等，具體示例見下文

「indent_brace_style」，縮進風(fēng)格，下面通過示例展示不同的縮進風(fēng)格

// K&Rwhile (x == y) {    something();    somethingelse();}
// Allmanwhile (x == y){    something();    somethingelse();}
// GNUwhile (x == y)  {    something();    somethingelse();  }
// Horstmannwhile (x == y){   something();    somethingelse();}
// Lispwhile (x == y) {    something();    somethingelse(); }

4. 安裝插件

VSCode必須安裝插件才能解析.editorconfig文件。

GitHub - editorconfig/editorconfig-vscode: EditorConfig extension for Visual Studio Code

5. .editorconfig和Prettier的關(guān)系

如果項目目錄中同時存在 Prettier 和 .editorconfig文件，Prettier會將.editorconfig文件中的規(guī)則轉(zhuǎn)換為相應(yīng)的Prettier配置。更多細節(jié)請看：Configuration File · EditorConfig

八、.vscode目錄

?

有一些項目從遠程倉庫clone下來之后，可以看到帶了.vscode/目錄，你知道這個目錄是用來干什么的嗎？

?

1 .vscode目錄是做什么的

存放工作區(qū)的項目配置和工具相關(guān)文件

2 setting.json

該文件用來設(shè)置項目用到的「設(shè)置」（工作區(qū)設(shè)置），該文件的設(shè)置會覆蓋掉vscode編輯器的全局配置

{  "editor.defaultFormatter": "esbenp.prettier-vscode",  "editor.formatOnSave": true,  "editor.codeActionsOnSave": {    "source.fixAll": true,    "source.fixAll.eslint": true,    "source.fixAll.stylelint": true  },  "stylelint.validate": ["css", "less", "scss", "vue"]}

3 extensions.json

該文件用來設(shè)置項目用到的「插件推薦列表」

先定義一個extensions.json文件

{  "recommendations": [    "dbaeumer.vscode-eslint",    "esbenp.prettier-vscode",    "Vue.volar"  ]}

然后到【插件】側(cè)邊欄，按下圖點擊，就會出現(xiàn)上述文件推薦的插件了，然后選擇安裝即可！

以上內(nèi)容是筆者在開發(fā)工作中不斷積累下來的，碼字不易，如果這篇文章對你有所幫助的話，請賞個贊支持一下吧，你的點贊收藏就是我最大的更新動力！
如果以上內(nèi)容有不對的地方，歡迎評論區(qū)指正；如果你也有好的提效tips上面沒有提到的話，也歡迎在評論區(qū)分享????