在vscode中如何用eslint和prettier,針對這個問題,這篇文章詳細介紹了相對應的分析和解答,希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
目前創(chuàng)新互聯(lián)已為上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機、網(wǎng)站托管、服務器租用、企業(yè)網(wǎng)站設(shè)計、曲沃網(wǎng)站維護等服務,公司將堅持客戶導向、應用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長,共同發(fā)展。
1)首先在vscode中安裝eslint,然后在vscode的settings.json添加如下代碼
"editor.formatOnSave": true, // 保存是格式化 "editor.codeActionsOnSave": { "source.fixAll.eslint": true // 按照eslint規(guī)則格式化 }, "eslint.format.enable": true, // 啟用ESLint作為已驗證文件的格式化程序
2)必須在項目中安裝eslint(或者全局安裝)
這個是vscode中eslint插件的要求:
3)在根目錄中添加 .eslintrc.js 文件,添加如下代碼
module.exports = { root: true, env: { node: true, }, extends: ["eslint:recommended"], parserOptions: { parser: "babel-eslint", }, rules: {} };
4)rules 里面的設(shè)置
quotes: [ 'error', 'single' ], semi: ['error', 'never']
屬性值數(shù)組中第一個元素設(shè)置
屬性值數(shù)組中第二個元素設(shè)置
eslint.bootcss.com/docs/rules/ 找到對應屬性點擊進入,然后找到options
eslint:recommended 默認規(guī)則的都有標記
注意:此時項目就會按照默認設(shè)置,以及rules里面的規(guī)則進行提示,保存時也會根據(jù)eslint的規(guī)則就行格式化。
(注:eslint與prettier的結(jié)合視情況而定,不是非得要與prettier一起使用)
1)首先在vscode中安裝prettier插件,然后在vscode中的 settings.json 里面添加下面的代碼
"editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
2)在項目中安裝prettier
同時還需要安裝eslint-plugin-prettier
、eslint-config-prettier
,這兩個插件的目的就是為了使eslint可以按照prettier的規(guī)則進行提示(注意這兩個插件的版本號問題,最新的 eslint-plugin-prettier 的4.0版本使用時有問題)
"eslint-config-prettier": "^8.3.0", "eslint-plugin-prettier": "^3.3.1"
然后在 .eslintrc.js里面的extends加上 plugin:prettier/recommended
extends: ["eslint:recommended", "plugin:prettier/recommended"]
然后就可以在根目錄下添加.prettierrc.js
文件,eslint將按照里面的規(guī)則進行提示,同時保存的時候也會按照里面的規(guī)則進行格式化
module.exports = { semi: false, singleQuote: true, bracketSpacing: true, }
1)首先在創(chuàng)建的時候選擇eslint + prettier的設(shè)置
2)在根目錄下創(chuàng)建 .prettierrc.js,并添加規(guī)則
module.exports = { semi: false, singleQuote: true, bracketSpacing: true, };
默認情況下,當代碼中的格式不正確時,會是warn警告
如果需要把它變成error,需要在.eslintrc.js中添加如下代碼
rules: { //… 'prettier/prettier': 'error' }
注:在修改完一些配置后,vscode可以不會馬上生效,此時可以關(guān)閉項目,重新打開試試
關(guān)于在vscode中如何用eslint和prettier問題的解答就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。
網(wǎng)頁名稱:在vscode中如何用eslint和prettier
文章鏈接:http://muchs.cn/article38/ihsgsp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供靜態(tài)網(wǎng)站、品牌網(wǎng)站制作、網(wǎng)站改版、全網(wǎng)營銷推廣、網(wǎng)站導航、網(wǎng)站策劃
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)