Vue開發中積累
阿新 • • 發佈:2020-08-20
最近使用Vue2.x和Ant Design of vue搭建前端。記錄下使用過程中的一些總結
一、EditorConfig外掛和ESLint
1、概述
EditorConfig概述
EditorConfig有助於維護跨多個編輯器和IDE從事同一專案的多個開發人員的一致編碼風格。在使用不同的編輯器上編寫的程式碼,會有一定的風格差異; 有的編輯器預設縮排使用tab
, 而有的編輯器使用space
; 為了統一這些差異, 我們需要使用editorconfig
來統一規範;EditorConfig專案包含一個用於定義編碼樣式的檔案格式和一個文字編輯器外掛集合,這些文字編輯器外掛使編輯器可以讀取檔案格式並遵循定義的樣式。 EditorConfig檔案易於閱讀,並且可以與版本控制系統很好地協同工作。
ESLint概述
Eslint
是js
的程式碼檢查工具, 在編寫js
程式碼的時候,有些錯誤很難被發現,需要在執行的時候不斷的排錯; 而且每個人的編寫程式碼的風格不一致,這樣造成了閱讀對方程式碼的困難;因此我們需要eslint
在編寫的過程發現錯誤,並統一風格;
2、EditorConfig和ESLint關係
兩者都可以對程式碼風格進行控制,側重點稍有點不同,EditorConfig更偏向於程式碼風格,定義和維護一致的編碼風格。 Eslint側重於幫助我們檢查Javascript程式設計的語法錯誤。 Eslint 和 .editorconfig 並不衝突,同時配合使用可以使程式碼風格更加優雅。3、EditorConfig的使用
editorConfig外掛支援很多編譯器,我用的是vscode,安裝如下:
在專案的根目錄下建立.editorconfig
配置檔案:
# EditorConfig is awesome: https://EditorConfig.org # top-most EditorConfig file root = true # Unix-style newlines with a newline ending every file [*] end_of_line = lf insert_final_newline = true # Matches multiple files with brace expansion notation # SetView Codedefault charset [*.{js,py}] charset = utf-8 # 4 space indentation [*.py] indent_style = space indent_size = 4 # Tab indentation (no size specified) [Makefile] indent_style = tab # Indentation override for all JS under lib directory [lib/**.js] indent_style = space indent_size = 2 # Matches the exact files either package.json or .travis.yml [{package.json,.travis.yml}] indent_style = space indent_size = 2
4、ESLint的使用
這裡就不介紹ESLint安裝和使用官網說的很清楚http://eslint.cn/
二、