一、本節(jié)內(nèi)容
- VueCli腳手架自定認創(chuàng)建項目
- ESlint代碼規(guī)范與修復(fù)
- ESlint自動修正插件
二、VueCli 自定義創(chuàng)建項目
1.安裝腳手架 (已安裝)
npm i @vue/cli -g
2.創(chuàng)建項目
vue create hm-exp-mobile
- 選項
Vue CLI v5.0.8
? Please pick a preset:
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
> Manually select features 選自定義
- 手動選擇功能
- 選擇vue的版本
3.x
> 2.x
- 是否使用history模式
- 選擇css預(yù)處理
- 選擇eslint的風格 （eslint 代碼規(guī)范的檢驗工具，檢驗代碼是否符合規(guī)范）
- 比如：const age = 18; => 報錯！多加了分號！后面有工具，一保存，全部格式化成最規(guī)范的樣子
- 選擇校驗的時機 （直接回車）
- 選擇配置文件的生成方式 （直接回車）
- 是否保存預(yù)設(shè)，下次直接使用？ => 不保存，輸入 N
- 等待安裝，項目初始化完成
- 啟動項目
npm run serve
三、ESlint代碼規(guī)范及手動修復(fù)
代碼規(guī)范：一套寫代碼的約定規(guī)則。例如：賦值符號的左右是否需要空格？一句結(jié)束是否是要加;？…
沒有規(guī)矩不成方圓
ESLint:是一個代碼檢查工具，用來檢查你的代碼是否符合指定的規(guī)則(你和你的團隊可以自行約定一套規(guī)則)。在創(chuàng)建項目時，我們使用的是 JavaScript Standard Style 代碼風格的規(guī)則。
1.JavaScript Standard Style 規(guī)范說明
建議把：https://standardjs.com/rules-zhcn.html 看一遍，然后在寫的時候, 遇到錯誤就查詢解決。
下面是這份規(guī)則中的一小部分：
- 字符串使用單引號 – 需要轉(zhuǎn)義的地方除外
- 無分號 – 這沒什么不好。不騙你！
-
關(guān)鍵字后加空格
if (condition) { ... } -
函數(shù)名后加空格
function name (arg) { ... } - 堅持使用全等
===摒棄==一但在需要檢查null || undefined時可以使用obj == null - …
2.代碼規(guī)范錯誤
如果你的代碼不符合standard的要求，eslint會跳出來刀子嘴，豆腐心地提示你。
下面我們在main.js中隨意做一些改動：添加一些空行，空格。
import Vue from 'vue'
import App from './App.vue'
import './styles/index.less'
import router from './router'
Vue.config.productionTip = false
new Vue ( {
render: h => h(App),
router
}).$mount('#app')
按下保存代碼之后：
你將會看在控制臺中輸出如下錯誤：
eslint 是來幫助你的。心態(tài)要好，有錯，就改。
3.手動修正
根據(jù)錯誤提示來一項一項手動修正。
如果你不認識命令行中的語法報錯是什么意思，你可以根據(jù)錯誤代碼（func-call-spacing, space-in-parens,…）去 ESLint 規(guī)則列表中查找其具體含義。
打開 ESLint 規(guī)則表，使用頁面搜索（Ctrl + F）這個代碼，查找對該規(guī)則的一個釋義。
四、通過eslint插件來實現(xiàn)自動修正
- eslint會自動高亮錯誤顯示
- 通過配置，eslint會自動幫助我們修復(fù)錯誤
- 如何安裝
文章來源：http://www.zghlxwxcb.cn/news/detail-775976.html
- 如何配置
// 當保存的時候，eslint自動幫我們修復(fù)錯誤
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// 保存代碼，不自動格式化
"editor.formatOnSave": false
- 注意：eslint的配置文件必須在根目錄下，這個插件才能才能生效。打開項目必須以根目錄打開，一次打開一個項目
- 注意：使用了eslint校驗之后，把vscode帶的那些格式化工具全禁用了 Beatify
settings.json 參考文章來源地址http://www.zghlxwxcb.cn/news/detail-775976.html
{
"window.zoomLevel": 2,
"workbench.iconTheme": "vscode-icons",
"editor.tabSize": 2,
"emmet.triggerExpansionOnTab": true,
// 當保存的時候，eslint自動幫我們修復(fù)錯誤
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// 保存代碼，不自動格式化
"editor.formatOnSave": false
}
到了這里，關(guān)于【Vue2+3入門到實戰(zhàn)】（17）VUE之VueCli腳手架自定認創(chuàng)建項目、ESlint代碼規(guī)范與修復(fù)、 ESlint自動修正插件的使用 詳細示例的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
