欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue中使用eslint和editorconfig方式

 更新時間:2022年05月25日 11:35:27   作者:可能是魚  
這篇文章主要介紹了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實現(xiàn)簡單跑馬燈效果

    vue實現(xiàn)簡單跑馬燈效果

    這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單跑馬燈效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-05-05
  • 如何理解Vue中computed和watch的區(qū)別

    如何理解Vue中computed和watch的區(qū)別

    這篇文章主要介紹了Vue中computed和watch的區(qū)別,對Vue感興趣的同學,可以參考下
    2021-05-05
  • Vue中keep-alive組件作用詳解

    Vue中keep-alive組件作用詳解

    這篇文章主要為大家詳細介紹了Vue中keep-alive組件的作用,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-02-02
  • vue 獲取到數(shù)據(jù)但卻渲染不到頁面上的解決方法

    vue 獲取到數(shù)據(jù)但卻渲染不到頁面上的解決方法

    這篇文章主要介紹了vue 獲取到數(shù)據(jù)但卻渲染不到頁面上的解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-11-11
  • Vuejs中使用markdown服務器端渲染的示例

    Vuejs中使用markdown服務器端渲染的示例

    這篇文章主要介紹了Vuejs 中使用 markdown的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-11-11
  • vue 根據(jù)數(shù)組中某一項的值進行排序的方法

    vue 根據(jù)數(shù)組中某一項的值進行排序的方法

    這篇文章主要介紹了vue 根據(jù)數(shù)組中某一項的值進行排序的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • ElementUI?$notify通知方法中渲染自定義組件實現(xiàn)

    ElementUI?$notify通知方法中渲染自定義組件實現(xiàn)

    這篇文章主要為大家介紹了ElementUI?$notify通知方法中渲染自定義組件實現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-06-06
  • Vue項目中使用addRoutes出現(xiàn)問題的解決方法

    Vue項目中使用addRoutes出現(xiàn)問題的解決方法

    大家應該都知道可以通過vue-router官方提供的一個api-->addRoutes可以實現(xiàn)路由添加的功能,事實上就也就實現(xiàn)了用戶權限,這篇文章主要給大家介紹了關于Vue項目中使用addRoutes出現(xiàn)問題的解決方法,需要的朋友可以參考下
    2021-08-08
  • vue中子組件傳遞數(shù)據(jù)給父組件的講解

    vue中子組件傳遞數(shù)據(jù)給父組件的講解

    今天小編就為大家分享一篇關于vue中子組件傳遞數(shù)據(jù)給父組件的講解,小編覺得內容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧
    2019-01-01
  • Vue非父子組件通信詳解

    Vue非父子組件通信詳解

    這篇文章主要為大家詳細介紹了Vue非父子組件通信的相關資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-06-06

最新評論