詳解Vscode中使用Eslint終極配置大全
在 vue項(xiàng)目中使用vscode編輯時(shí),使用了如下這套配置,保存時(shí)就會根據(jù)既定vue項(xiàng)目中.eslintrc.js文件設(shè)置的既定規(guī)則自動校驗(yàn)并依據(jù)規(guī)則修復(fù)代碼。
需安裝插件
主要是這兩個插件:
- ESLint
- Prettier - Code formatter
個人現(xiàn)用vscode插件截圖.png
vscode中setting.json中配置
{ // vscode默認(rèn)啟用了根據(jù)文件類型自動設(shè)置tabsize的選項(xiàng) "editor.detectIndentation": false, // 重新設(shè)定tabsize "editor.tabSize": 2, // #每次保存的時(shí)候自動格式化 "editor.formatOnSave": true, // #每次保存的時(shí)候?qū)⒋a按eslint格式進(jìn)行修復(fù) "eslint.autoFixOnSave": true, // 添加 vue 支持 "eslint.validate": [ "javascript", "javascriptreact", { "language": "vue", "autoFix": true } ], // #讓prettier使用eslint的代碼格式進(jìn)行校驗(yàn) "prettier.eslintIntegration": true, // #去掉代碼結(jié)尾的分號 "prettier.semi": false, // #使用帶引號替代雙引號 "prettier.singleQuote": true, // #讓函數(shù)(名)和后面的括號之間加個空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // #這個按用戶自身習(xí)慣選擇 "vetur.format.defaultFormatter.html": "js-beautify-html", // #讓vue中的js按編輯器自帶的ts格式進(jìn)行格式化 "vetur.format.defaultFormatter.js": "vscode-typescript", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force-aligned" // #vue組件中html代碼格式化樣式 } }, // 格式化stylus, 需安裝Manta's Stylus Supremacy插件 "stylusSupremacy.insertColons": false, // 是否插入冒號 "stylusSupremacy.insertSemicolons": false, // 是否插入分好 "stylusSupremacy.insertBraces": false, // 是否插入大括號 "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行 "stylusSupremacy.insertNewLineAroundBlocks": false, "window.zoomLevel": 0 // 兩個選擇器中是否換行 }
vue項(xiàng)目中.eslintrc.js文件常用個性化配置
// https://eslint.org/docs/user-guide/configuring module.exports = { root: false, parserOptions: { parser: 'babel-eslint' }, env: { browser: true }, extends: [ // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 'plugin:vue/essential', // https://github.com/standard/standard/blob/master/docs/RULES-en.md 'standard' ], // required to lint *.vue files plugins: ['vue'], // add your custom rules here rules: { // allow async-await 'generator-star-spacing': 'off', // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', eqeqeq: 'off', // 不能始用== 'no-unused-vars': 'off', // 消除未使用的變量 'no-undef': 'off', // 未使用變量報(bào)錯 'no-unreachable': 'off' // 不能執(zhí)行的代碼檢測 //此處一下還可以根據(jù)個人習(xí)慣設(shè)置更多個性化內(nèi)容 } }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
el-select如何獲取當(dāng)前選中的對象所有(item)數(shù)據(jù)
在開發(fā)業(yè)務(wù)場景中我們通常遇到一些奇怪的需求,下面這篇文章主要給大家介紹了關(guān)于el-select如何獲取當(dāng)前選中的對象所有(item)數(shù)據(jù)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11vue實(shí)現(xiàn)數(shù)字+英文字母組合鍵盤功能
這篇文章主要介紹了vue實(shí)現(xiàn)數(shù)字+英文字母組合鍵盤功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12vue3+vite引入插件unplugin-auto-import的方法
這篇文章主要介紹了vue3+vite引入插件unplugin-auto-import的相關(guān)知識,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值?,需要的朋友可以參考下2022-10-10Vue3源碼分析偵聽器watch的實(shí)現(xiàn)原理
watch?的本質(zhì)就是觀測一個響應(yīng)式數(shù)據(jù),當(dāng)數(shù)據(jù)發(fā)生變化時(shí)通知并執(zhí)行相應(yīng)的回調(diào)函數(shù)。watch的實(shí)現(xiàn)利用了effect?和?options.scheduler?選項(xiàng),這篇文章主要介紹了Vue3源碼分析偵聽器watch的實(shí)現(xiàn)原理,需要的朋友可以參考下2022-08-08使用proxy實(shí)現(xiàn)一個更優(yōu)雅的vue【推薦】
Proxy 用于修改某些操作的默認(rèn)行為,等同于在語言層面做出修改,所以屬于一種“元編程”。這篇文章主要介紹了用proxy實(shí)現(xiàn)一個更優(yōu)雅的vue,需要的朋友可以參考下2018-06-06Vue-CLI 3 scp2自動部署項(xiàng)目至服務(wù)器的方法
這篇文章主要介紹了Vue-CLI 3 scp2自動部署項(xiàng)目至服務(wù)器的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07