Vue中怎么使用eslint和editorconfig

這篇文章主要介紹“Vue中怎么使用eslint和editorconfig”，在日常操作中，相信很多人在Vue中怎么使用eslint和editorconfig問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Vue中怎么使用eslint和editorconfig”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

使用eslint和editorconfig方式

使用eslint的好處

1、避免運(yùn)行時(shí)因格式問(wèn)題報(bào)錯(cuò)

2、方便團(tuán)隊(duì)合作，代碼風(fēng)格統(tǒng)一

安裝eslint

命令行執(zhí)行：

  npm i 
  eslint eslint-config-standard 
  eslint-plugin-standard 
  eslint-plugin-promise 
  eslint-plugin-import 
  eslint-plugin-node 
  eslint-plugin-html -D

eslint-plugin-html插件識(shí)別html文件中的script標(biāo)簽里面的JavaScript

文件配置說(shuō)明

在項(xiàng)目目錄新建.eslintrc文件:

{
  "extends": "standard",
  "plugins": [
    "html"
  ],
  "rules": {
    "no-new": "off"
  }
}

啟動(dòng)命令配置

在package.json的scripts中加入：

"lint": "eslint --ext .js --ext .jsx --ext .vue client/",
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue client/"

client/ 為要檢查的文件夾

執(zhí)行：

npm run lint          //語(yǔ)法檢查
npm run lint-fix      //自動(dòng)修復(fù)語(yǔ)法檢查出現(xiàn)的問(wèn)題

自動(dòng)檢查語(yǔ)法配置

命令行執(zhí)行：

npm i eslint-loader babel-eslint -D

然后在.eslintrc文件中添加"parser": "babel-eslint"：

{
 "extends": "standard",
  "plugins": [
    "html"
  ],
  "parser": "babel-eslint",
  "rules": {
    "no-new": "off"
  }
}

在webpack的配置文件的module.rules中加入：

{
   test: /\.(vue|js|jsx)$/,
   loader: 'eslint-loader',
   exclude: /node_modules/,
   enforce: 'pre'   //預(yù)處理
},

添加editorconfig

在項(xiàng)目目錄新建.editorconfig文件：

root = true
    
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

vue editorconfig編輯器配置說(shuō)明

editorconfig是什么，有什么用

editorconfig是定義編碼樣式的配置文件，幫助多人合作項(xiàng)目或者不同編輯器下保持代碼風(fēng)格統(tǒng)一。

editorconfig示例

# http://editorconfig.org  (Editorconfig 的官方網(wǎng)站)
# 控制 EditorConfig 約定的范圍 
root = true 

# 匹配全部文件
[*]

# 設(shè)置字符集
charset = utf-8

# 縮進(jìn)風(fēng)格 可選"space"、"tab"
indent_style = space

# 縮進(jìn)大小 可以是數(shù)字（空格數(shù)）， tab(如果tab大小沒(méi)設(shè)置則按編輯器默認(rèn)tab大小)
indent_size = 2

# tab的寬度
tab_width = 4

# 結(jié)尾換行符，可選"lf"、"cr"、"crlf"
end_of_line = lf

# 文件最后插入一個(gè)空行
insert_final_newline = true

# 刪除行尾空格
trim_trailing_whitespace = true

# 匹配.java結(jié)尾的文件
[*.java]

# 匹配.md結(jié)尾的文件
[*.md]
trim_trailing_whitespace = false

root=true 控制 EditorConfig 約定的范圍 , Visual Studio 會(huì)在打開(kāi)的文件的目錄和每個(gè)父目錄中查找名為 .editorconfig 的文件。 到達(dá)根文件路徑時(shí)或找到具有 root=true 的 .editorconfig 文件時(shí)搜索結(jié)束。

檢查是否生效

在項(xiàng)目的 js 文件中使用 tab 鍵進(jìn)行縮進(jìn)，分別修改 indent_size 屬性值為 2 和 4，觀察是否有變化。

如果沒(méi)有任何變化，說(shuō)明還沒(méi)有安裝 Editorconfig 插件。

Editorconfig 插件

該插件的作用是告訴開(kāi)發(fā)工具，如 Webstorm 自動(dòng)去讀取項(xiàng)目根目錄下的 .editorconfig 配置文件，如果沒(méi)有安裝這個(gè)插件，光有一個(gè)配置文件是無(wú)法生效的。

Webstorm 2017.1 版本之后都是自動(dòng)安裝這個(gè)插件的。

到此，關(guān)于“Vue中怎么使用eslint和editorconfig”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！