vscode 配置eslint和prettier正確方法
ESlint
ESLint 是一款語法檢測工具。因?yàn)?JavaScript 本身是一門靈活的動(dòng)態(tài)語言，一千個(gè) JavaScriptor 就有一千種寫法。為了方便人們的理解，快速上手別人的代碼。
說明
在開發(fā)項(xiàng)目的時(shí)候，往往會(huì)通過eslint來檢查代碼格式，而prettier用來進(jìn)行代碼的格式化。本篇博文主要是記錄使用vscode開發(fā)vue項(xiàng)目時(shí)的eslint和prettier的配置。
vscode 安裝插件
首先，需要在vscode上安裝eslint和prettier的插件。
項(xiàng)目中的配置文件
在vue項(xiàng)目中，.eslintrc.js文件主要負(fù)責(zé)eslint的相關(guān)配置。
module.exports = {
root: true,
env: {
node: true,
},
extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
parserOptions: {
parser: "babel-eslint",
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
quotes: ['error', 'single', { allowTemplateLiterals: true }], // 單引號(hào) 允許使用反引號(hào)
semi: ['error', 'never'], // 禁止末尾使用分號(hào)
},
};
關(guān)于更多的eslint規(guī)則，可以點(diǎn)擊這里查看。
.prettierrc.js文件負(fù)責(zé)prettier的規(guī)則設(shè)置：
module.exports = {
tabWidth: 2, // tab
semi: false, // 結(jié)尾不用分號(hào)
singleQuote: true, // 使用單引號(hào)
bracketSpacing: true, // 對(duì)象屬性前后加空格
disableLanguages: ['vue'], // 不格式化vue文件
}
prettier
prettier 是一個(gè)代碼格式化插件。它并不關(guān)心你的語法是否正確，只關(guān)心你的代碼格式，比如是否使用單引號(hào)，語句結(jié)尾是否使用分號(hào)等等。
關(guān)于
prettier更多詳細(xì)的規(guī)則，可以點(diǎn)擊這里查看。
保存自動(dòng)格式化
如果希望在vscode中文件保存后就自動(dòng)格式化，可以在設(shè)置中進(jìn)行如下的設(shè)置：
或者在settings.json中添加下面的內(nèi)容也可以做到保存格式化：
到此這篇關(guān)于vscode 配置eslint和prettier的文章就介紹到這了,更多相關(guān)vscode 配置eslint和prettier內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
pycharm、idea、golang等JetBrains其他IDE修改行分隔符的詳細(xì)步驟(換行符)
這篇文章主要介紹了pycharm、idea、golang等JetBrains其他IDE修改行分隔符(換行符),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
如何在本地部署 DeepSeek Janus Pro 文生圖大模型
DeepSeek JanusPro模型在本地成功部署,支持圖片理解和文生圖功能,通過Gradio界面進(jìn)行交互,展示了其強(qiáng)大的多模態(tài)處理能力,本文介紹本地部署 DeepSeek Janus Pro 文生圖大模型的操作,感興趣的朋友一起看看吧2025-02-02
resty更新header控制api版本數(shù)據(jù)源讀寫分離
這篇文章主要介紹了resty的1.2.0-SNAPSHOT版本更新，可以通過header控制api的版本實(shí)現(xiàn)數(shù)據(jù)源讀寫分離，有需要的朋友可以借鑒參考下，希望能夠有所幫助<BR>，2022-03-03
開發(fā)人員一定要加入收藏夾的網(wǎng)站，比較不錯(cuò)。大家可以參考一下。2009-11-11
超實(shí)用Internet Download Manager(IDM)破解注冊(cè)碼,全版本通用
IDM下載器是一個(gè)十分好用的文件下載工具。IDM下載器它能夠幫助你提升5倍的下載速度，強(qiáng)大的續(xù)傳功能，讓你不再擔(dān)心因網(wǎng)絡(luò)問題、計(jì)算機(jī)宕機(jī)、停電等原因所造成的數(shù)據(jù)不全問題，下面小編給大家?guī)砹薎nternet Download Manager(IDM)破解注冊(cè)碼，感興趣的朋友參考下吧2023-01-01
計(jì)算機(jī)科學(xué)中32個(gè)常用的基礎(chǔ)算法
這篇文章主要介紹了計(jì)算機(jī)科學(xué)中32個(gè)常用的基礎(chǔ)算法,也是計(jì)算機(jī)科學(xué)中最重要的算法,需要的朋友可以參考下2014-06-06
Win10下配置VScode遠(yuǎn)程開發(fā)ssh-remote(免密登錄)
在開發(fā)或者做實(shí)驗(yàn)的過程中，我們經(jīng)常會(huì)用到遠(yuǎn)程服務(wù)器或者Github的項(xiàng)目，本文詳細(xì)介紹的VScode配置免密ssh+remote，一旦連接成功，我們就可以在本地自己喜歡的IDE上操作遠(yuǎn)程服務(wù)器端的項(xiàng)目了2021-08-08
這篇文章主要介紹了Hadoop 運(yùn)行環(huán)境搭建過程，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
Notepad++文本比較插件Compare詳解(最新免費(fèi))
Notepad++是一款強(qiáng)大的文本編輯器，它提供了文件對(duì)比功能，可以幫助我們快速找出兩個(gè)文件之間的差異點(diǎn)，這篇文章主要介紹了Notepad++文本比較插件Compare詳解(最新免費(fèi))，感興趣的朋友一起看看吧2024-01-01
需求分析是掌握被測系統(tǒng)的過程,一般測試和開發(fā)人員都要進(jìn)行需求分析,測試方做的需求分析稱為測試需求分析,這篇文章主要給大家介紹了關(guān)于軟件測試需求分析的相關(guān)資料,需要的朋友可以參考下2007-04-04