1. 程式人生 > 實用技巧 >Vue開發中積累

Vue開發中積累

最近使用Vue2.x和Ant Design of vue搭建前端。記錄下使用過程中的一些總結

一、EditorConfig外掛和ESLint

1、概述  

  EditorConfig概述

  EditorConfig有助於維護跨多個編輯器和IDE從事同一專案的多個開發人員的一致編碼風格。在使用不同的編輯器上編寫的程式碼,會有一定的風格差異; 有的編輯器預設縮排使用tab, 而有的編輯器使用space; 為了統一這些差異, 我們需要使用editorconfig來統一規範;EditorConfig專案包含一個用於定義編碼樣式的檔案格式和一個文字編輯器外掛集合,這些文字編輯器外掛使編輯器可以讀取檔案格式並遵循定義的樣式。

EditorConfig檔案易於閱讀,並且可以與版本控制系統很好地協同工作。

  ESLint概述

  Eslintjs的程式碼檢查工具, 在編寫js程式碼的時候,有些錯誤很難被發現,需要在執行的時候不斷的排錯; 而且每個人的編寫程式碼的風格不一致,這樣造成了閱讀對方程式碼的困難;因此我們需要eslint在編寫的過程發現錯誤,並統一風格;

2、EditorConfigESLint關係

  兩者都可以對程式碼風格進行控制,側重點稍有點不同,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
# Set 
default 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
View Code

4、ESLint的使用

  這裡就不介紹ESLint安裝和使用官網說的很清楚http://eslint.cn/

二、