vue.config和editorconfig

我們在做項目的時候，應該給經常用到的文件配置它的別名，這樣做，既可以方便引用，也可以防止當文件位置發生改變的時候出現錯誤。

        配置前:

        import bartar from '../../components/bartar'

        配置後(不用再關心文件層級關係):

        import bartarfrom 'components/bartar'

        那麼，我們應該如何進行配置呢？

        在根目錄下，創建一個vue.config.js文件，添加如下代碼：

    module.exports= {

    configureWebpack: {

            resolve: {

            alias: {

                'assets':'@/assets',

                'common':'@/common',

                'components':'@/components',

                'network':'@/network',

               'views':'@/views'

                  }

            }

        }

}

 

EditorConfig是什麼

在項目裏，大多時候都能看到.editorconfig文件，剛開始總是忽視掉它，認爲它不太重要。但是，它的存在，必定有它的理由，於是，抽空來研究一下，它是什麼，能做什麼。

 官網是這麼介紹EditorConfig的，“EditorConfig幫助開發人員在不同的編輯器和IDE之間定義和維護一致的編碼樣式。EditorConfig項目由用於定義編碼樣式的文件格式和一組文本編輯器插件組成，這些插件使編輯器能夠讀取文件格式並遵循定義的樣式。EditorConfig文件易於閱讀，並且與版本控制系統配合使用。”

不同的開發人員，不同的編輯器，有不同的編碼風格，而EditorConfig就是用來協同團隊開發人員之間的代碼的風格及樣式規範化的一個工具，而.editorconfig正是它的默認配置文件。

幫助開發者在不同IDE中保持一致的代碼風格。工程中有.editorconfig配置文件及使用的IDE默認支持EditorConfig或安裝插件支持即可。（VSCode是安裝插件支持）

# 告訴EditorConfig插件，這是根文件，不用繼續往上查找
root = true

# 匹配全部文件
[*]
# 結尾換行符，可選"lf"、"cr"、"crlf"
end_of_line = lf
# 在文件結尾插入新行
insert_final_newline = true
# 刪除一行中的前後空格
trim_trailing_whitespace = true
# 匹配js和py結尾的文件
[*.{js,py}]
# 設置字符集
charset = utf-8

# 匹配py結尾的文件
[*.py]
# 縮進風格，可選"space"、"tab"
indent_style = space
# 縮進的空格數
indent_size = 4

# 以下匹配，類同
[Makefile]
indent_style = tab
# tab的寬度
tab_width = 4

# 以下匹配，類同
[lib/**.js]
indent_style = space
indent_size = 2

[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

1、如果是windows用戶，如果無法創建.editorconfig文件，則需要先創建.editorconfig.文件，系統會自動重命名成.editorconfig文件。

2、EditorConfig的匹配規則是從上往下，即先定義的規則優先級比後定義的優先級要高。

3、插件安裝，在GitHub上已經有了各種流行編輯器的插件源代碼，可根據說明安裝。

4、對於VS Core，對應的插件名是EditorConfig for VS Code。

5、這裏列舉了VS Code支持的規則：

• indent_style
• indent_size
• tab_width
• end_of_line
• insert_final_newline
• trim_trailing_whitespace