vscode+vue cli3.0創(chuàng)建項目配置Prettier+eslint方式
更新時間:2023年10月20日 10:50:24 作者:miss-f
這篇文章主要介紹了vscode+vue cli3.0創(chuàng)建項目配置Prettier+eslint方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
1、vue create 項目名創(chuàng)建項目時選擇自定義創(chuàng)建
會詢問你是否安裝eslint,我選擇了ESLint + Prettier方式;
他會默認下載
eslintbabel-eslinteslint-plugin-prettiereslint-plugin-vue@vue/eslint-config-prettier
等插件
2、創(chuàng)建項目時
你會選擇1種直接在package.json中生成eslint配置即字段eslintConfig里面
(個人不喜歡這個方式。你對寫的東西不方便備注)
還有一種就是在項目下面創(chuàng)建一個.eslintrc.js文件里面配置你的eslint配置
3、如下是我個人配置的.eslintrc.js
module.exports = {
// 默認情況下,ESLint會在所有父級組件中尋找配置文件,一直到根目錄。ESLint一旦發(fā)現配置文件中有 "root": true,它就會停止在父級目錄中尋找。
root: true,
// 該配置屬性定義來一組預定義的全局變量。這些環(huán)境并不是互斥的,所以你可以同時定義多個。
env: {
node: true,
},
// extends是擴展插件的意思,用來配置vue.js風格
extends: [
"plugin:vue/essential", // 全稱 eslint-plugin-vue
"@vue/prettier", // 全稱 eslint-plugin-prettier
],
// ESLint 支持使用第三方插件。在使用插件之前,你必須使用包管理工具安裝它。
// 在配置文件里配置插件時,可以使用 plugins 關鍵字來存放插件名字的列表。
// 插件名稱可以省略 eslint-plugin- 前綴。
plugins: ["vue"],
// 額外的全局變量。我們使用第三方提供的全局變量的時候(例如:jQuery,AMap 等對象),
// ESLint 并不能識別他們,總是會報錯。這個時候,該配置的作用就出現了。
// 使用 globals 指出你要使用的全局變量。將變量設置為 true 將允許變量被重寫,或 false 將不允許被重寫。
globals: {
// $: false,
// jquery: false,
// AMap: false
},
// ESLint 的規(guī)則。你可以使用注釋或配置文件修改你項目中要使用的規(guī)則。
// rules:開啟規(guī)則和發(fā)生錯誤時報告的等級,規(guī)則的錯誤等級有三種:
// 0 或'off':關閉規(guī)則。
// 1 或'warn':打開規(guī)則,并且作為一個警告(并不會導致檢查不通過)。
// 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, // 是否使用分號, 默認true
singleQuote: true, // 使用單引號, 默認false(在jsx中配置無效, 默認都是雙引號)
},
],
},
parserOptions: {
parser: "babel-eslint",
},
};
4、vscode需要安裝幾個格式化插件
BeautifyESLintVeturPrettier - Code formatter
然后點擊文件=>首選項=>設置會有用戶設置和工作區(qū)設置建議保存在工作區(qū)設置以便大家共享
5、工作區(qū)設置后
會在項目下生成一個.vscode文件夾下面有setting.json
以下是我的配置:
{
// 把eslint保存在工作區(qū),方便大家共享
// 配置eslint
"vetur.validation.template": false,
// vscode默認啟用了根據文件類型自動設置tabsize的選項
"editor.detectIndentation": false,
//關閉Vetur的linting功能
// "vetur.validation.template": false,
// 重新設定tabsize
"editor.tabSize": 2,//制表符符號eslint
// #讓函數(名)和后面的括號之間加個空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #這個按用戶自身習慣選擇
"vetur.format.defaultFormatter.html": "js-beautify-html",//格式化.vue中html
"vetur.format.defaultFormatter.ts": "none",
// #讓vue中的js按編輯器自帶的ts格式進行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto", //屬性強制折行對齊
"end_with_newline": false,
},
"prettier": {
"semi": false, // #去掉代碼結尾的分號
"singleQuote": true // #使用帶引號替代雙引號
}
},
// 每次保存的時候自動格式化(建議關掉,用eslint來修復)
"editor.formatOnSave": false,
//舊版本配置
// 每次保存的時候將代碼按eslint格式進行修復
// "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"
}, //函數注釋
"fileheader.cursorMode": {
"name": "",
"test": "test font",
"msg": "",
"param": "",
"return": ""
},
}
總結
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue3中element-plus全局使用Icon圖標的過程詳解
我們在用vue開發(fā)網站的時候,往往圖標是起著很重要的作,這篇文章主要給大家介紹了關于Vue3中element-plus全局使用Icon圖標的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-01-01
vue項目中使用rimraf?dev啟動時刪除dist目錄方式
這篇文章主要介紹了vue項目中使用rimraf?dev啟動時刪除dist目錄方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04
Vue報錯ERR_OSSL_EVP_UNSUPPORTED解決方法
Vue項目啟動時報錯ERR_OSSL_EVP_UNSUPPORTED,本文主要介紹了Vue報錯ERR_OSSL_EVP_UNSUPPORTED解決方法,具有一定的參考價值,感興趣的可以了解一下2024-08-08

