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

Vue3+TS項目中eslint、prettier安裝配置詳細指南

 更新時間：2024年07月17日 10:50:19   作者：小遲前端  
為了更好的統(tǒng)一項目的代碼風(fēng)格,因此在編寫時就可以使用eslint+prettier,它們不僅能方便代碼編寫,還能避免不必要的錯誤,讓代碼變得更加嚴(yán)謹,這篇文章主要給大家介紹了關(guān)于Vue3+TS項目中eslint、prettier安裝配置的相關(guān)資料,需要的朋友可以參考下

前言

eslint和prettier的作用主要為：可以規(guī)范團隊的代碼風(fēng)格。在實際項目中，團隊的每個成員的編碼習(xí)慣都不同，這極有可能造成，一個項目多個代碼風(fēng)格，這會造成代碼閱讀困難，后期維護難度大燈問題，這就需要配置下eslint和prettier。

1.eslint

1.安裝依賴

首先我們需要先安裝 @eslint/create-config 插件：

pnpm install -D @eslint/create-config

提示我未安裝eslint，按y，回車安裝

Need to install the following packages:
  eslint@8.57.0
Ok to proceed? (y) y

接下來執(zhí)行初始化。

npx eslint --init

接下來會有彈出一些問題，可根據(jù)自身項目情況進行回答，期間會詢問是否需要安裝相應(yīng)插件，y->回車。

2.配置eslintrc

會在項目根目錄下生成.eslintrc.cjs文件，然后對項目進行自己需要的配置

module.exports = {
    // 使 eslint 支持 node 與 ES6
    env: {
        browser: true,
        es2021: true,
        node: true
    },
    // 引入推薦的語法校驗規(guī)則
    extends: [
        'eslint:recommended',
        'plugin:vue/vue3-recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:prettier/recommended'
    ],
    overrides: [],
    // 這里一定要配置對 先使用vue-eslint-parser 再使用@typescript-eslint/parser
    // 先解析 <template> 標(biāo)簽中的內(nèi)容 然后再解析 vue <script> 標(biāo)簽中的 TS 代碼
    // 選擇使用的解析器
    parser: 'vue-eslint-parser',
    // 解析器的詳細配置
    parserOptions: {
        // 使用最新版 ES 語法
        ecmaVersion: 'latest',
        // 使用 ESLint TS 解析器
        parser: '@typescript-eslint/parser',
        // 使用 ES 模塊化規(guī)范
        sourceType: 'module'
    },
    // 使用的插件
    plugins: ['vue', '@typescript-eslint'],
    // 自定義規(guī)則
    rules: {
        '@typescript-eslint/no-unused-vars': 'off',
        indent: [
            'error',
            4,
            {
                SwitchCase: 1
            }
        ],
        'vue/multi-word-component-names': [
            'error',
            {
                ignores: ['index', 'Header'] //需要忽略的組件名
            }
        ],
        '@typescript-eslint/no-var-requires': 'off',
        '@typescript-eslint/no-explicit-any': 'off',
        semi: 'off',
        '@typescript-eslint/no-this-alias': 'off',
        'eslintno-debugger': 'off',
        'vue/no-unused-vars': 'off',
        'vue/no-template-shadow': 'off',
        'vue/require-v-for-key': 'off',
        'vue/no-textarea-mustache': 'off',
        'vue/no-v-html': 'off'
    }
};

3.配置下忽略文件eslintignore

在根目錄下創(chuàng)建.eslintignore文件，排除一些文件夾

node_modules
*.md
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
Dockerfile
.eslintrc.js

4.配置package.json

然后配置下package.json中的啟動命令，這樣便可以執(zhí)行 pnpm run lint:fix 來進行自動格式化代碼。

  "scripts": {
    "dev": "vite --open",
    "test": "echo \"Error: no test specified\" && exit 1",
    "eslint:fix": "eslint --fix"
  },

2 prettier

1.安裝 prettier 依賴

pnpm install -D prettier
pnpm install -D eslint-config-prettier eslint-plugin-prettier

2.創(chuàng)建.prettierrc.js 文件

module.exports = {
    "singleQuote": true,
    "semi": false,
    "bracketSpacing": true,
    "htmlWhitespaceSensitivity": "ignore",
    "endOfLine": "auto",
    "trailingComma": "all",
    "tabWidth": 2,
    
    "printWidth": 100,
    "useTabs": false,
    "bracketSameLine": true,
    "arrowParens": "always",
    "vueIndentScriptAndStyle": false,
    "singleAttributePerLine": false
  }

3.創(chuàng)建 .prettierignore 文件

dist/
node_modules/
.vscode/
.idea/
/public/*
.local
**/*.svg
**/*.sh

4.配置package.json

{
  "scripts": {
    "lint:prettier": "prettier --write **/*.{js,json,tsx,css,less,scss,vue,html,md}"
  }
}

附：如果ESLint和Prettier在某些規(guī)則上有沖突，。比如方法名和后面的括號之間的空格問題。ESLint 規(guī)則是添加空格，Prettier則是不添加空格

此時可以考慮在ESlint配置文件中關(guān)閉相關(guān)檢測規(guī)則。

1、打開 .eslintrc.js 配置文件

2、在 rules 規(guī)則下，新增一條規(guī)則

'space-before-function-paren': 'off'

3、重啟項目

至此，你即可在 VSCode 保存時，自動格式化代碼！

總結(jié) 

到此這篇關(guān)于Vue3+TS項目中eslint、prettier安裝配置的文章就介紹到這了,更多相關(guān)eslint、prettier安裝配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • 查找Vue中下標(biāo)的操作(some和findindex)

    查找Vue中下標(biāo)的操作(some和findindex)

    這篇文章主要介紹了查找Vue中下標(biāo)的操作(some和findindex)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • vue3?父控件遠程獲取數(shù)據(jù)在子組件上顯示不出來的解決方案

    vue3?父控件遠程獲取數(shù)據(jù)在子組件上顯示不出來的解決方案

    這篇文章主要介紹了vue3?父控件遠程獲取數(shù)據(jù)，在子組件上顯示不出來，本文給大家分享兩種解決方案幫助大家解決這個問題,需要的朋友可以參考下
    2023-08-08
  • vue使用SVG實現(xiàn)圓形進度條音樂播放

    vue使用SVG實現(xiàn)圓形進度條音樂播放

    這篇文章主要為大家詳細介紹了vue使用SVG實現(xiàn)圓形進度條音樂播放，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-04-04
  • Vue 實現(xiàn)前端權(quán)限控制的示例代碼

    Vue 實現(xiàn)前端權(quán)限控制的示例代碼

    這篇文章主要介紹了Vue 實現(xiàn)前端權(quán)限控制的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-07-07
  • Vue中的computed和watch用法及區(qū)別

    Vue中的computed和watch用法及區(qū)別

    Vue中的computed和watch都可以監(jiān)聽數(shù)據(jù)變化，但computed主要用于計算派生屬性，而watch則用于監(jiān)聽特定數(shù)據(jù)變化并執(zhí)行回調(diào)函數(shù)。兩者使用時需要注意區(qū)別
    2023-04-04
  • vue的props實現(xiàn)子組件隨父組件一起變化

    vue的props實現(xiàn)子組件隨父組件一起變化

    這篇文章主要為大家詳細介紹了vue的props如何實現(xiàn)子組件隨父組件一起變化,具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-10-10
  • vue2.0如何借用vue-pdf實現(xiàn)在線預(yù)覽pdf文件

    vue2.0如何借用vue-pdf實現(xiàn)在線預(yù)覽pdf文件

    這篇文章主要介紹了vue2.0如何借用vue-pdf實現(xiàn)在線預(yù)覽pdf文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • Vue實現(xiàn)計算器計算效果

    Vue實現(xiàn)計算器計算效果

    這篇文章主要為大家詳細介紹了Vue實現(xiàn)計算器計算效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-08-08
  • vue基于vant實現(xiàn)上拉加載下拉刷新的示例代碼

    vue基于vant實現(xiàn)上拉加載下拉刷新的示例代碼

    普遍存在于各種app中的上拉加載下拉刷新功能，本文主要介紹了vue基于vant實現(xiàn)上拉加載下拉刷新，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-01-01
  • vue實現(xiàn)大文件切片上傳的示例詳解

    vue實現(xiàn)大文件切片上傳的示例詳解

    前端上傳文件很大時,會出現(xiàn)各種問題,比如連接超時了,網(wǎng)斷了,都會導(dǎo)致上傳失敗,這個時候就需要將文件切片上傳,下面我們就來學(xué)習(xí)一下如何使用vue實現(xiàn)大文件切片上傳吧
    2023-11-11

最新評論