Vue中使用eslint和editorconfig方式
使用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è)插件的。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目中vue.config.js文件詳解
vue.config.js?是一個(gè)可選的配置文件,如果項(xiàng)目的?(和?package.json?同級(jí)的)?根目錄中存在這個(gè)文件,那么它會(huì)被?@vue/cli-service?自動(dòng)加載,這篇文章主要介紹了vue項(xiàng)目中vue.config.js文件的介紹,需要的朋友可以參考下2024-02-02
vue開(kāi)發(fā)樹(shù)形結(jié)構(gòu)組件(組件遞歸)
這篇文章主要為大家詳細(xì)介紹了vue開(kāi)發(fā)樹(shù)形結(jié)構(gòu)組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了vue里swiper的一些坑及swiper在vue中的使用,本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
element自定義表單驗(yàn)證上傳身份證正反面的實(shí)現(xiàn)
表單驗(yàn)證在很多地方都可以用的到，本文主要介紹了element自定義表單驗(yàn)證上傳身份證正反面的實(shí)現(xiàn)，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue-cli 是 vue.js 的腳手架工具，可以幫助我們編寫(xiě)基礎(chǔ)代碼、快速搭建開(kāi)發(fā)環(huán)境。下面這篇文章主要給大家介紹了關(guān)于vue-cli初始化項(xiàng)目中使用less的相關(guān)資料，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起看看吧2018-08-08
vue3+vite+vant項(xiàng)目下按需引入vant報(bào)錯(cuò)Failed?to?resolve?import的原因及解決
這篇文章主要給大家介紹了關(guān)于vue3+vite+vant項(xiàng)目下按需引入vant報(bào)錯(cuò)Failed?to?resolve?import的原因及解決方案,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
在vue項(xiàng)目中如何獲取視頻的時(shí)長(zhǎng)
這篇文章主要介紹了在vue項(xiàng)目中如何獲取視頻的時(shí)長(zhǎng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue中使用keep-alive動(dòng)態(tài)刪除已緩存組件方式
這篇文章主要介紹了vue中使用keep-alive動(dòng)態(tài)刪除已緩存組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue項(xiàng)目使用高德地圖時(shí)報(bào)錯(cuò):AMap?is?not?defined解決辦法
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目使用高德地圖時(shí)報(bào)錯(cuò):AMap?is?not?defined的解決辦法,"AMap is not defined"是一個(gè)錯(cuò)誤提示,意思是在代碼中沒(méi)有找到定義的AMap,需要的朋友可以參考下2023-12-12
vue-cli3 項(xiàng)目從搭建優(yōu)化到docker部署的方法
這篇文章主要介紹了vue-cli3 項(xiàng)目從搭建優(yōu)化到docker部署的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01