EditorConfig插件和ESLint

最近使用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
# 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

4、ESLint的使用

　　vscode安裝插件

　　

 

 　　vscode 擴展設置，依次點擊 文件 > 首選項 > 設置

 

 　　settings.json中會有默認的配置，可根據自己情況替換

 

 

　　根據實際情況修改項目目錄里.eslitrc.js的配置文件 

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  }

}