VUE3照本宣科系列導(dǎo)航
1.VUE3照本宣科——認(rèn)識(shí)VUE3
2.VUE3照本宣科——應(yīng)用實(shí)例API與setup
3.VUE3照本宣科——響應(yīng)式與生命周期鉤子
4.VUE3照本宣科——內(nèi)置指令與自定義指令及插槽
5.VUE3照本宣科——路由與狀態(tài)管理器
6.VUE3照本宣科——eslint與prettier
7.VUE3照本宣科——package.json與vite.config.js
前言
????????????記錄學(xué)習(xí)成果，以便溫故而知新
“VUE3照本宣科”是指照著中文官網(wǎng)和菜鳥教程這兩個(gè)“本”來學(xué)習(xí)一下VUE3。以前也學(xué)過VUE2，當(dāng)時(shí)只在gitee留下一些代碼，卻沒有記錄學(xué)習(xí)的心得體會(huì)，有時(shí)也免不了會(huì)追憶一下。
以后出現(xiàn)“中文官網(wǎng)”不做特殊說明就是指：https://cn.vuejs.org/；菜鳥教程就是指：https://www.runoob.com/vue3/vue3-tutorial.html
一、eslint
ESLint官網(wǎng)https://eslint.nodejs.cn/。
ESLint 是一個(gè)可配置的 JavaScript 檢查器。 它可以幫助你發(fā)現(xiàn)并修復(fù) JavaScript 代碼中的問題。 問題可以是任何東西，從潛在的運(yùn)行時(shí)錯(cuò)誤，到不遵循最佳實(shí)踐，再到風(fēng)格問題。
ESLint 是完全插件化的。 每條規(guī)則都是一個(gè)插件，你可以在運(yùn)行時(shí)添加更多。 你還可以添加社區(qū)插件、配置和解析器來擴(kuò)展 ESLint 的功能。
1.配置文件
ESLint 支持多種格式的配置文件：
- JavaScript - 使用 .eslintrc.js 并導(dǎo)出包含你的配置的對(duì)象。
- JavaScript (ESM) - 在 package.json 中指定 “type”:“module” 的 JavaScript 包中運(yùn)行 ESLint 時(shí)使用 .eslintrc.cjs。 請(qǐng)注意，ESLint 目前不支持 ESM 配置。
- YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 來定義配置結(jié)構(gòu)。
- JSON - 使用 .eslintrc.json 定義配置結(jié)構(gòu)。 ESLint 的 JSON 文件也允許 JavaScript 樣式的注釋。
- package.json - 在你的 package.json 文件中創(chuàng)建一個(gè) eslintConfig 屬性并在那里定義你的配置。
如果同一個(gè)目錄下有多個(gè)配置文件，ESLint 只使用一個(gè)。 優(yōu)先順序如下：
- .eslintrc.js
- .eslintrc.cjs
- .eslintrc.yaml
- .eslintrc.yml
- .eslintrc.json
- package.json
zbxk項(xiàng)目中的配置文件是.eslintrc.cjs。
2.配置規(guī)則
在配置文件中添加規(guī)則，如圖：
'rules': {
'eqeqeq': 'off',//等于使用===
'curly': 'error',//對(duì)所有控制語句強(qiáng)制執(zhí)行一致的大括號(hào)樣式
'quotes': ['error', 'single']//字符串用單引號(hào)
}
加完以后，原先字符串用雙引號(hào)的地方報(bào)錯(cuò)了，如圖：
鼠標(biāo)懸停，顯示報(bào)錯(cuò)原因如圖：
集成開發(fā)環(huán)境的“問題”頁簽中也列出了錯(cuò)誤原因，如圖：
點(diǎn)擊“快速修復(fù)”，出現(xiàn)快速修復(fù)方案，如圖所示：
可以選擇一個(gè)快速修復(fù)方案來修復(fù)。
ESLint官網(wǎng)中的規(guī)則有很多，這里只是選擇了三條作為示例。
運(yùn)行如下命令，也可以修復(fù)報(bào)錯(cuò)
npm run lint
因?yàn)閷?shí)際上運(yùn)行的下面的命令：
eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore
.是當(dāng)前目錄開始；
–ext是檢測(cè)的擴(kuò)展名；
–fix是修復(fù)；
–ignore-path是忽略文件；
3.忽略錯(cuò)誤
示例代碼如下：
// eslint-disable-next-line no-unused-vars
const classC = ref('classC')
代碼中的注釋是禁止檢測(cè)下一行未使用變量。
本文只是一個(gè)引子，對(duì)ESLint有個(gè)感性認(rèn)識(shí)，想要深入了解，還是要到ESLint官網(wǎng)學(xué)習(xí)。
二、prettier
prettier官網(wǎng)https://www.prettier.cn/。
雖然講是中文的，但是其文檔則不然。
Prettier is an opinionated code formatter。
百度翻譯：
Prettier是一個(gè)固執(zhí)己見的代碼格式化程序
zbxk項(xiàng)目的配置文件是“.prettierrc.json”，內(nèi)容如下：
{
"$schema": "https://json.schemastore.org/prettierrc",
"semi": false,
"tabWidth": 2,
"singleQuote": true,
"printWidth": 100,
"trailingComma": "none"
}
其中
semi是語句末尾不加分號(hào)
tabWidth是tab寬度
singleQuote是單引號(hào)
printWidth是指定換行長度
trailingComma是在多行逗號(hào)分隔的句法結(jié)構(gòu)中，盡可能打印尾隨逗號(hào)
運(yùn)行如下命令：
npm run format
實(shí)際運(yùn)行的是：
prettier --write src/
如下圖所示：
亮色顯示的都是美化過代碼的文件。再執(zhí)行一次上面的命令，結(jié)果如圖所示：
一個(gè)亮色的文件都沒有，說明前次美化過的代碼不需要再次美化了。
這也是一個(gè)引子，更多的內(nèi)容還是需要去prettier官網(wǎng)學(xué)習(xí)。文章來源：http://www.zghlxwxcb.cn/news/detail-744956.html
三、總結(jié)
本專題的eslint與prettier都是Vue開發(fā)插件，所以package.json配置文件的“devDependencies”中。文章來源地址http://www.zghlxwxcb.cn/news/detail-744956.html
到了這里，關(guān)于VUE3照本宣科——eslint與prettier的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
