欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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方式;

他會默認下載

  • eslint
  • babel-eslint
  • eslint-plugin-prettier
  • eslint-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ā)現(xiàn)配置文件中有   "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 并不能識別他們,總是會報錯。這個時候,該配置的作用就出現(xiàn)了。
  // 使用 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需要安裝幾個格式化插件

  • Beautify
  • ESLint
  • Vetur
  • Prettier - Code formatter

然后點擊文件=>首選項=>設置會有用戶設置和工作區(qū)設置建議保存在工作區(qū)設置以便大家共享

5、工作區(qū)設置后

會在項目下生成一個.vscode文件夾下面有setting.json

以下是我的配置:

{
// 把eslint保存在工作區(qū),方便大家共享
   // 配置eslint
   "vetur.validation.template": false,
   // vscode默認啟用了根據(jù)文件類型自動設置tabsize的選項
   "editor.detectIndentation": false,
   //關閉Vetur的linting功能
   // "vetur.validation.template": false,
   // 重新設定tabsize
   "editor.tabSize": 2,//制表符符號eslint
   //  #讓函數(shù)(名)和后面的括號之間加個空格
   "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, //  #去掉代碼結(jié)尾的分號 
       "singleQuote": true //  #使用帶引號替代雙引號 
     }
   },
   // 每次保存的時候自動格式化(建議關掉,用eslint來修復)
   "editor.formatOnSave": false,
   
   //舊版本配置
    // 每次保存的時候?qū)⒋a按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"
   }, //函數(shù)注釋  
   "fileheader.cursorMode": {
     "name": "",
     "test": "test font",
     "msg": "",
     "param": "",
     "return": ""
   },
}

總結(jié)

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

  • Vue3中element-plus全局使用Icon圖標的過程詳解

    Vue3中element-plus全局使用Icon圖標的過程詳解

    我們在用vue開發(fā)網(wǎng)站的時候,往往圖標是起著很重要的作,這篇文章主要給大家介紹了關于Vue3中element-plus全局使用Icon圖標的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-01-01
  • vue項目中使用rimraf?dev啟動時刪除dist目錄方式

    vue項目中使用rimraf?dev啟動時刪除dist目錄方式

    這篇文章主要介紹了vue項目中使用rimraf?dev啟動時刪除dist目錄方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue{{}}拼接字符串和換行符方式

    vue{{}}拼接字符串和換行符方式

    這篇文章主要介紹了vue{{}}拼接字符串和換行符方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-12-12
  • vue.js動畫中的js鉤子函數(shù)的實現(xiàn)

    vue.js動畫中的js鉤子函數(shù)的實現(xiàn)

    這篇文章主要介紹了vue.js動畫中的js鉤子函數(shù)的實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07
  • vue如何使用element-ui 實現(xiàn)自定義分頁

    vue如何使用element-ui 實現(xiàn)自定義分頁

    這篇文章主要介紹了vue如何使用element-ui 實現(xiàn)自定義分頁,可以通過插槽實現(xiàn)自定義的分頁,本文通過實例圖文相結(jié)合給大家介紹的非常詳細,感興趣的朋友一起看看吧
    2024-07-07
  • vue實現(xiàn)表格分頁功能

    vue實現(xiàn)表格分頁功能

    這篇文章主要為大家詳細介紹了vue實現(xiàn)表格分頁功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • 前端vue實現(xiàn)的h5頁面接入微信支付流程(jsapi方式)

    前端vue實現(xiàn)的h5頁面接入微信支付流程(jsapi方式)

    vue實現(xiàn)微信支付有三種方式,第一種方式是PC端支付,第二種方式是H5支付,第三種方式是微信公眾號支付,這篇文章主要給大家介紹了關于前端vue實現(xiàn)的h5頁面接入微信支付流程,文中介紹的方法是利用jsapi方式,通過代碼將實現(xiàn)的方法介紹的非常詳細,需要的朋友可以參考下
    2024-01-01
  • Vue+Element實現(xiàn)表格單元格編輯

    Vue+Element實現(xiàn)表格單元格編輯

    這篇文章主要為大家詳細介紹了Vue+Element實現(xiàn)表格單元格編輯,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • Vue報錯ERR_OSSL_EVP_UNSUPPORTED解決方法

    Vue報錯ERR_OSSL_EVP_UNSUPPORTED解決方法

    Vue項目啟動時報錯ERR_OSSL_EVP_UNSUPPORTED,本文主要介紹了Vue報錯ERR_OSSL_EVP_UNSUPPORTED解決方法,具有一定的參考價值,感興趣的可以了解一下
    2024-08-08
  • vue3引入highlight.js進行代碼高亮的方法實例

    vue3引入highlight.js進行代碼高亮的方法實例

    最近忙著開發(fā)自己的開發(fā)腳手架,在做代碼生成器的時候,有個預覽功能,需要讓代碼高亮,下面這篇文章主要給大家介紹了關于vue3引入highlight.js進行代碼高亮的相關資料,需要的朋友可以參考下
    2022-04-04

最新評論