Vue中使用eslint和editorconfig方式
使用eslint和editorconfig方式
使用eslint的好處
1、避免運行時因格式問題報錯
2、方便團隊合作,代碼風格統(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插件識別html文件中的script標簽里面的JavaScript
文件配置說明
在項目目錄新建.eslintrc文件:
{ ? "extends": "standard", ? "plugins": [ ? ? "html" ? ], ? "rules": { ? ? "no-new": "off" ? } }
啟動命令配置
在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 ? ? ? ? ?//語法檢查 npm run lint-fix ? ? ?//自動修復語法檢查出現(xiàn)的問題
自動檢查語法配置
命令行執(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' ? //預處理 },
添加editorconfig
在項目目錄新建.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編輯器配置說明
editorconfig是什么,有什么用
editorconfig是定義編碼樣式的配置文件,幫助多人合作項目或者不同編輯器下保持代碼風格統(tǒng)一。
editorconfig示例
# http://editorconfig.org ?(Editorconfig 的官方網(wǎng)站) # 控制 EditorConfig 約定的范圍? root = true? # 匹配全部文件 [*] # 設置字符集 charset = utf-8 # 縮進風格 可選"space"、"tab" indent_style = space # 縮進大小 可以是數(shù)字(空格數(shù)), tab(如果tab大小沒設置則按編輯器默認tab大小) indent_size = 2 # tab的寬度 tab_width = 4 # 結尾換行符,可選"lf"、"cr"、"crlf" end_of_line = lf # 文件最后插入一個空行 insert_final_newline = true # 刪除行尾空格 trim_trailing_whitespace = true # 匹配.java結尾的文件 [*.java] # 匹配.md結尾的文件 [*.md] trim_trailing_whitespace = false
root=true 控制 EditorConfig 約定的范圍 , Visual Studio 會在打開的文件的目錄和每個父目錄中查找名為 .editorconfig 的文件。 到達根文件路徑時或找到具有 root=true 的 .editorconfig 文件時搜索結束。
檢查是否生效
在項目的 js 文件中使用 tab 鍵進行縮進,分別修改 indent_size 屬性值為 2 和 4,觀察是否有變化。
如果沒有任何變化,說明還沒有安裝 Editorconfig 插件。
Editorconfig 插件
該插件的作用是告訴開發(fā)工具,如 Webstorm 自動去讀取項目根目錄下的 .editorconfig 配置文件,如果沒有安裝這個插件,光有一個配置文件是無法生效的。
Webstorm 2017.1 版本之后都是自動安裝這個插件的。
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue 獲取到數(shù)據(jù)但卻渲染不到頁面上的解決方法
這篇文章主要介紹了vue 獲取到數(shù)據(jù)但卻渲染不到頁面上的解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-11-11vue 根據(jù)數(shù)組中某一項的值進行排序的方法
這篇文章主要介紹了vue 根據(jù)數(shù)組中某一項的值進行排序的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08ElementUI?$notify通知方法中渲染自定義組件實現(xiàn)
這篇文章主要為大家介紹了ElementUI?$notify通知方法中渲染自定義組件實現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06Vue項目中使用addRoutes出現(xiàn)問題的解決方法
大家應該都知道可以通過vue-router官方提供的一個api-->addRoutes可以實現(xiàn)路由添加的功能,事實上就也就實現(xiàn)了用戶權限,這篇文章主要給大家介紹了關于Vue項目中使用addRoutes出現(xiàn)問題的解決方法,需要的朋友可以參考下2021-08-08