vscode+vue cli3.0創(chuàng)建項(xiàng)目配置Prettier+eslint方式
1、vue create 項(xiàng)目名創(chuàng)建項(xiàng)目時選擇自定義創(chuàng)建
會詢問你是否安裝eslint,我選擇了ESLint + Prettier方式;
他會默認(rèn)下載
eslint
babel-eslint
eslint-plugin-prettier
eslint-plugin-vue
@vue/eslint-config-prettier
等插件
2、創(chuàng)建項(xiàng)目時
你會選擇1種直接在package.json中生成eslint配置即字段eslintConfig里面
(個人不喜歡這個方式。你對寫的東西不方便備注)
還有一種就是在項(xiàng)目下面創(chuàng)建一個.eslintrc.js文件里面配置你的eslint配置
3、如下是我個人配置的.eslintrc.js
module.exports = { // 默認(rèn)情況下,ESLint會在所有父級組件中尋找配置文件,一直到根目錄。ESLint一旦發(fā)現(xiàn)配置文件中有 "root": true,它就會停止在父級目錄中尋找。 root: true, // 該配置屬性定義來一組預(yù)定義的全局變量。這些環(huán)境并不是互斥的,所以你可以同時定義多個。 env: { node: true, }, // extends是擴(kuò)展插件的意思,用來配置vue.js風(fēng)格 extends: [ "plugin:vue/essential", // 全稱 eslint-plugin-vue "@vue/prettier", // 全稱 eslint-plugin-prettier ], // ESLint 支持使用第三方插件。在使用插件之前,你必須使用包管理工具安裝它。 // 在配置文件里配置插件時,可以使用 plugins 關(guān)鍵字來存放插件名字的列表。 // 插件名稱可以省略 eslint-plugin- 前綴。 plugins: ["vue"], // 額外的全局變量。我們使用第三方提供的全局變量的時候(例如:jQuery,AMap 等對象), // ESLint 并不能識別他們,總是會報(bào)錯。這個時候,該配置的作用就出現(xiàn)了。 // 使用 globals 指出你要使用的全局變量。將變量設(shè)置為 true 將允許變量被重寫,或 false 將不允許被重寫。 globals: { // $: false, // jquery: false, // AMap: false }, // ESLint 的規(guī)則。你可以使用注釋或配置文件修改你項(xiàng)目中要使用的規(guī)則。 // rules:開啟規(guī)則和發(fā)生錯誤時報(bào)告的等級,規(guī)則的錯誤等級有三種: // 0 或'off':關(guān)閉規(guī)則。 // 1 或'warn':打開規(guī)則,并且作為一個警告(并不會導(dǎo)致檢查不通過)。 // 2 或'error':打開規(guī)則,并且作為一個錯誤(退出碼為1,檢查不通過) rules: { // allow debugger during development "no-console": process.env.NODE_ENV === "production" ? "error" : "off", "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off", "prettier/prettier": [ "error", { semi: false, // 是否使用分號, 默認(rèn)true singleQuote: true, // 使用單引號, 默認(rèn)false(在jsx中配置無效, 默認(rèn)都是雙引號) }, ], }, parserOptions: { parser: "babel-eslint", }, };
4、vscode需要安裝幾個格式化插件
Beautify
ESLint
Vetur
Prettier - Code formatter
然后點(diǎn)擊文件=>首選項(xiàng)=>設(shè)置會有用戶設(shè)置和工作區(qū)設(shè)置建議保存在工作區(qū)設(shè)置以便大家共享
5、工作區(qū)設(shè)置后
會在項(xiàng)目下生成一個.vscode文件夾下面有setting.json
以下是我的配置:
{ // 把eslint保存在工作區(qū),方便大家共享 // 配置eslint "vetur.validation.template": false, // vscode默認(rèn)啟用了根據(jù)文件類型自動設(shè)置tabsize的選項(xiàng) "editor.detectIndentation": false, //關(guān)閉Vetur的linting功能 // "vetur.validation.template": false, // 重新設(shè)定tabsize "editor.tabSize": 2,//制表符符號eslint // #讓函數(shù)(名)和后面的括號之間加個空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // #這個按用戶自身習(xí)慣選擇 "vetur.format.defaultFormatter.html": "js-beautify-html",//格式化.vue中html "vetur.format.defaultFormatter.ts": "none", // #讓vue中的js按編輯器自帶的ts格式進(jìn)行格式化 "vetur.format.defaultFormatter.js": "vscode-typescript", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "auto", //屬性強(qiáng)制折行對齊 "end_with_newline": false, }, "prettier": { "semi": false, // #去掉代碼結(jié)尾的分號 "singleQuote": true // #使用帶引號替代雙引號 } }, // 每次保存的時候自動格式化(建議關(guān)掉,用eslint來修復(fù)) "editor.formatOnSave": false, //舊版本配置 // 每次保存的時候?qū)⒋a按eslint格式進(jìn)行修復(fù) // "eslint.autoFixOnSave": true, // 添加 vue 支持 "eslint.validate": [ "javascript", "javascriptreact", "html", "vue", ], "eslint.options": { "extensions": [ ".js", ".vue" ] }, //新版本配置 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "HookyQR.beautify" }, "[html]": { "editor.defaultFormatter": "vscode.html-language-features" }, // "vetur.format.options.tabSize": 2, // 文件頭部注釋 "fileheader.customMade": { "Descripttion": "", "version": "", "Author": "Mr.fang", "Date": "Do not edit", "LastEditors": "Mr.fang", "LastEditTime": "Do not Edit" }, //函數(shù)注釋 "fileheader.cursorMode": { "name": "", "test": "test font", "msg": "", "param": "", "return": "" }, }
總結(jié)
以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3中element-plus全局使用Icon圖標(biāo)的過程詳解
我們在用vue開發(fā)網(wǎng)站的時候,往往圖標(biāo)是起著很重要的作,這篇文章主要給大家介紹了關(guān)于Vue3中element-plus全局使用Icon圖標(biāo)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01vue項(xiàng)目中使用rimraf?dev啟動時刪除dist目錄方式
這篇文章主要介紹了vue項(xiàng)目中使用rimraf?dev啟動時刪除dist目錄方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04vue.js動畫中的js鉤子函數(shù)的實(shí)現(xiàn)
這篇文章主要介紹了vue.js動畫中的js鉤子函數(shù)的實(shí)現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07vue如何使用element-ui 實(shí)現(xiàn)自定義分頁
這篇文章主要介紹了vue如何使用element-ui 實(shí)現(xiàn)自定義分頁,可以通過插槽實(shí)現(xiàn)自定義的分頁,本文通過實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-07-07前端vue實(shí)現(xiàn)的h5頁面接入微信支付流程(jsapi方式)
vue實(shí)現(xiàn)微信支付有三種方式,第一種方式是PC端支付,第二種方式是H5支付,第三種方式是微信公眾號支付,這篇文章主要給大家介紹了關(guān)于前端vue實(shí)現(xiàn)的h5頁面接入微信支付流程,文中介紹的方法是利用jsapi方式,通過代碼將實(shí)現(xiàn)的方法介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01Vue+Element實(shí)現(xiàn)表格單元格編輯
這篇文章主要為大家詳細(xì)介紹了Vue+Element實(shí)現(xiàn)表格單元格編輯,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04Vue報(bào)錯ERR_OSSL_EVP_UNSUPPORTED解決方法
Vue項(xiàng)目啟動時報(bào)錯ERR_OSSL_EVP_UNSUPPORTED,本文主要介紹了Vue報(bào)錯ERR_OSSL_EVP_UNSUPPORTED解決方法,具有一定的參考價(jià)值,感興趣的可以了解一下2024-08-08vue3引入highlight.js進(jìn)行代碼高亮的方法實(shí)例
最近忙著開發(fā)自己的開發(fā)腳手架,在做代碼生成器的時候,有個預(yù)覽功能,需要讓代碼高亮,下面這篇文章主要給大家介紹了關(guān)于vue3引入highlight.js進(jìn)行代碼高亮的相關(guān)資料,需要的朋友可以參考下2022-04-04