vscode+vue cli3.0創(chuàng)建項(xiàng)目配置Prettier+eslint方式
1、vue create 項(xiàng)目名創(chuàng)建項(xiàng)目時(shí)選擇自定義創(chuàng)建
會(huì)詢問(wèn)你是否安裝eslint,我選擇了ESLint + Prettier方式;
他會(huì)默認(rèn)下載
eslintbabel-eslinteslint-plugin-prettiereslint-plugin-vue@vue/eslint-config-prettier
等插件
2、創(chuàng)建項(xiàng)目時(shí)
你會(huì)選擇1種直接在package.json中生成eslint配置即字段eslintConfig里面
(個(gè)人不喜歡這個(gè)方式。你對(duì)寫的東西不方便備注)
還有一種就是在項(xiàng)目下面創(chuàng)建一個(gè).eslintrc.js文件里面配置你的eslint配置
3、如下是我個(gè)人配置的.eslintrc.js
module.exports = {
// 默認(rèn)情況下,ESLint會(huì)在所有父級(jí)組件中尋找配置文件,一直到根目錄。ESLint一旦發(fā)現(xiàn)配置文件中有 "root": true,它就會(huì)停止在父級(jí)目錄中尋找。
root: true,
// 該配置屬性定義來(lái)一組預(yù)定義的全局變量。這些環(huán)境并不是互斥的,所以你可以同時(shí)定義多個(gè)。
env: {
node: true,
},
// extends是擴(kuò)展插件的意思,用來(lái)配置vue.js風(fēng)格
extends: [
"plugin:vue/essential", // 全稱 eslint-plugin-vue
"@vue/prettier", // 全稱 eslint-plugin-prettier
],
// ESLint 支持使用第三方插件。在使用插件之前,你必須使用包管理工具安裝它。
// 在配置文件里配置插件時(shí),可以使用 plugins 關(guān)鍵字來(lái)存放插件名字的列表。
// 插件名稱可以省略 eslint-plugin- 前綴。
plugins: ["vue"],
// 額外的全局變量。我們使用第三方提供的全局變量的時(shí)候(例如:jQuery,AMap 等對(duì)象),
// ESLint 并不能識(shí)別他們,總是會(huì)報(bào)錯(cuò)。這個(gè)時(shí)候,該配置的作用就出現(xiàn)了。
// 使用 globals 指出你要使用的全局變量。將變量設(shè)置為 true 將允許變量被重寫,或 false 將不允許被重寫。
globals: {
// $: false,
// jquery: false,
// AMap: false
},
// ESLint 的規(guī)則。你可以使用注釋或配置文件修改你項(xiàng)目中要使用的規(guī)則。
// rules:開啟規(guī)則和發(fā)生錯(cuò)誤時(shí)報(bào)告的等級(jí),規(guī)則的錯(cuò)誤等級(jí)有三種:
// 0 或'off':關(guān)閉規(guī)則。
// 1 或'warn':打開規(guī)則,并且作為一個(gè)警告(并不會(huì)導(dǎo)致檢查不通過(guò))。
// 2 或'error':打開規(guī)則,并且作為一個(gè)錯(cuò)誤(退出碼為1,檢查不通過(guò))
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, // 是否使用分號(hào), 默認(rèn)true
singleQuote: true, // 使用單引號(hào), 默認(rèn)false(在jsx中配置無(wú)效, 默認(rèn)都是雙引號(hào))
},
],
},
parserOptions: {
parser: "babel-eslint",
},
};
4、vscode需要安裝幾個(gè)格式化插件
BeautifyESLintVeturPrettier - Code formatter
然后點(diǎn)擊文件=>首選項(xiàng)=>設(shè)置會(huì)有用戶設(shè)置和工作區(qū)設(shè)置建議保存在工作區(qū)設(shè)置以便大家共享
5、工作區(qū)設(shè)置后
會(huì)在項(xiàng)目下生成一個(gè).vscode文件夾下面有setting.json
以下是我的配置:
{
// 把eslint保存在工作區(qū),方便大家共享
// 配置eslint
"vetur.validation.template": false,
// vscode默認(rèn)啟用了根據(jù)文件類型自動(dòng)設(shè)置tabsize的選項(xiàng)
"editor.detectIndentation": false,
//關(guān)閉Vetur的linting功能
// "vetur.validation.template": false,
// 重新設(shè)定tabsize
"editor.tabSize": 2,//制表符符號(hào)eslint
// #讓函數(shù)(名)和后面的括號(hào)之間加個(gè)空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #這個(gè)按用戶自身習(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)制折行對(duì)齊
"end_with_newline": false,
},
"prettier": {
"semi": false, // #去掉代碼結(jié)尾的分號(hào)
"singleQuote": true // #使用帶引號(hào)替代雙引號(hào)
}
},
// 每次保存的時(shí)候自動(dòng)格式化(建議關(guān)掉,用eslint來(lái)修復(fù))
"editor.formatOnSave": false,
//舊版本配置
// 每次保存的時(shí)候?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é)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
單頁(yè)面Vue頁(yè)面刷新出現(xiàn)閃爍問(wèn)題及解決
這篇文章主要介紹了單頁(yè)面Vue頁(yè)面刷新出現(xiàn)閃爍問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07
vue-router中query和params的區(qū)別解析
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁(yè)面應(yīng)用,這篇文章主要介紹了vue-router中query和params的區(qū)別 ,需要的朋友可以參考下2022-10-10
vue2+elementui進(jìn)行hover提示的使用
本文主要介紹了vue2+elementui進(jìn)行hover提示的使用,主要分為外部和內(nèi)部,具有一定的參考價(jià)值,感興趣的可以了解一下2021-11-11
vue連接本地服務(wù)器的實(shí)現(xiàn)示例
本文主要介紹了vue連接本地服務(wù)器的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
vue2導(dǎo)入使用vue-codemirror組件的教程詳解
vue-codemirror是一個(gè)基于Vue的代碼在線編輯器組件,它封裝了CodeMirror編輯器,使得在Vue項(xiàng)目中可以方便地使用CodeMirror,下面我們就來(lái)看看vue-codemirror的具體使用吧2024-02-02
使用Vue完成一個(gè)簡(jiǎn)單的todolist的方法
本篇文章主要介紹了使用Vue完成一個(gè)簡(jiǎn)單的todolist的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
去除Element-Plus下拉菜單邊框的實(shí)現(xiàn)步驟
Element-Plus 是 Element UI 的 Vue 3 版本,它提供了一套完整的組件庫(kù),在使用 Element-Plus 進(jìn)行開發(fā)時(shí),我們可能會(huì)遇到需要自定義組件樣式的情況,本文將介紹如何使用 CSS 來(lái)去除 Element-Plus 下拉框的邊框,需要的朋友可以參考下2024-03-03
Vue項(xiàng)目之ES6裝飾器在項(xiàng)目實(shí)戰(zhàn)中的應(yīng)用
作為一個(gè)曾經(jīng)的Java?coder,當(dāng)?shù)谝淮慰吹絡(luò)s里面的裝飾器Decorator,就馬上想到了Java中的注解,當(dāng)然在實(shí)際原理和功能上面,Java的注解和js的裝飾器還是有很大差別的,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目之ES6裝飾器在項(xiàng)目實(shí)戰(zhàn)中應(yīng)用的相關(guān)資料,需要的朋友可以參考下2022-06-06
vant 時(shí)間選擇器--開始時(shí)間和結(jié)束時(shí)間實(shí)例
這篇文章主要介紹了vant 時(shí)間選擇器--開始時(shí)間和結(jié)束時(shí)間實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11

