為什么需要使用prettier？

首先要知道eslint與prettier的區(qū)別，ESLint 是一個(gè)用于檢測(cè)?JavaScript?代碼中的錯(cuò)誤和潛在問題的工具。它只關(guān)注你寫的代碼是否正確，不會(huì)管你代碼的格式；Prettier 則是一個(gè)代碼格式化工具，它旨在確保代碼在縮進(jìn)、空格、換行、引號(hào)和分號(hào)等格式化方面遵循一致的規(guī)則，在團(tuán)隊(duì)開發(fā)中，讓所有人的代碼規(guī)范都保存一致的風(fēng)格，還是比較重要的。

配置eslint

按照uniapp官網(wǎng)的步驟初始化好uniapp項(xiàng)目，我是用腳手架的方式搭建的，這里就不再贅述了。

配置eslint不能直接去網(wǎng)上抄別人配置，因?yàn)樗麄兊呐渲脤?duì)應(yīng)的依賴版本可能跟你的不一樣，不同版本的配置可能存在差異，一旦配置文件中有錯(cuò)誤的配置，整個(gè)配置就不會(huì)生效。

按照eslint官網(wǎng)的步驟，第一步初始化eslint，在你的項(xiàng)目根目錄執(zhí)行以下命令：

npm init @eslint/config

根據(jù)提示，選擇你需要的配置

完成所有步驟后，項(xiàng)目下會(huì)自動(dòng)生成eslint的配置文件：

還會(huì)自動(dòng)安裝需要的依賴包：

自動(dòng)生成的依賴版本準(zhǔn)是沒錯(cuò)的，所以配置eslint最好不要去抄別人的依賴包和配置，以免配置文件不生效，或依賴包存在兼容性問題的情況。

安裝eslint插件

要讓vscode通過eslint檢查代碼，還得在vscode中安裝eslint插件

完成這步后，最好是重啟下vscode，不出意外這個(gè)時(shí)候，你代碼中如果有語法錯(cuò)誤的地方，應(yīng)該就會(huì)爆紅了。

但是代碼規(guī)范問題依舊不會(huì)爆紅，如單引號(hào)與雙引號(hào)，末尾是否有分號(hào)等。這就是prettier該干的事情了。

配置prettier

要讓prettier與eslint一起愉快的玩耍，需要用到兩個(gè)插件，分別為“eslint-config-prettier”，“eslint-plugin-prettier”，當(dāng)然還有prettier也不要忘了安裝，三個(gè)插件一起安裝，避免出現(xiàn)插件版本不兼容的情況。

執(zhí)行以下命令，安裝

npm i eslint-config-prettier eslint-plugin-prettier prettier -D

#or

pnpm add eslint-config-prettier eslint-plugin-prettier prettier -D

以上兩種根據(jù)自己情況任選其一，?使用其他包管理器的小伙伴，請(qǐng)自行百度之。

安裝好依賴之后，在項(xiàng)目根目錄新建.prettierrc.cjs配置文件，內(nèi)容如下：

module.exports = {
  printWidth: 80, // 一行最多80個(gè)字符
  tabWidth: 2, // 設(shè)置工具每一個(gè)水平縮進(jìn)的空格數(shù)
  useTabs: false,//不使用縮進(jìn),而使用空格
  semi: true, // 句末是否加分號(hào)
  vueIndentScriptAndStyle: true,//Vue文件中＜script＞和＜style＞是否縮進(jìn)
  singleQuote: false, // 用單引號(hào)
  trailingComma: 'none', // 最后一個(gè)對(duì)象元素符加逗號(hào)
  bracketSpacing: true,// 箭頭函數(shù),只有一個(gè)參數(shù)的時(shí)候,也需要括號(hào)
  arrowParens: 'always', // 不需要寫文件開頭的 @prettier
  insertPragma: false, // 不需要自動(dòng)在文件開頭加入 @prettier
  endOfLine: 'auto' // 換行符使用 auto 有些地方說的是推薦使用lf
}

?這里只是一部分配置，如需要更多配置，可以去prettier官網(wǎng)查看，地址：https://www.prettier.cn/

要讓eslint使用prettier的規(guī)范，還需要修改下eslint的配置，根據(jù)文檔上的描述，

??文檔地址：https://github.com/prettier/eslint-plugin-prettier?tab=readme-ov-file#installation

需要在“extends”數(shù)組的最后一項(xiàng)加上"plugin:prettier/recommended"，注意一定是添加在最后一項(xiàng)，否則會(huì)被其他配置覆蓋掉！

進(jìn)階

到這里，eslint代碼檢查與prettier規(guī)范檢查就配置完了，如果你想在保存代碼的時(shí)候自動(dòng)格式化代碼，需要在vscode中安裝Prettier - Code formatter插件

并開啟vscode保存自動(dòng)格式化的設(shè)置，在vscode左下角點(diǎn)擊設(shè)置按鈕，點(diǎn)擊seetings選項(xiàng)：

打開vscode配置文件，找到Text Editor->Formatting->?Format on save選項(xiàng)，勾選此選項(xiàng)即可。

最后

?接下來處理vue文件中template位置有報(bào)錯(cuò)的問題，

及uni這個(gè)全局變量爆紅的問題，

如果你那里沒報(bào)錯(cuò)，請(qǐng)忽略之。

第一個(gè)報(bào)錯(cuò)，是文件命名規(guī)范的問題，要想不讓他報(bào)錯(cuò)，在eslint的配置文件中的rules選項(xiàng)中添加配置："vue/multi-word-component-names": "off"，忽略檢查即可。

?第二個(gè)報(bào)錯(cuò)，需要在eslint中添加一個(gè)全局變量忽略配置，忽略u(píng)ni全局變量的檢查：

 // 全局變量忽略檢測(cè)
  globals: {
    uni: "writable"
  },

或者在rules中添加"no-undef": "off"選項(xiàng)，將該規(guī)則關(guān)閉：

至此，所有步驟已完成，撒花。。。?文章來源地址http://www.zghlxwxcb.cn/news/detail-840579.html

到了這里，關(guān)于uniapp+vite+vue3+ts配置eslint代碼檢查及prettier規(guī)范檢查的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！