一。下載依賴包
package.json

"@babel/core": "^7.22.11",
"@babel/eslint-parser": "^7.22.11",						// ESLint的Babel解析器代替babel-eslint
"@vue/cli-plugin-babel": "^5.0.8",
"@vue/cli-plugin-eslint": "^5.0.8",						// vue 專門的 ESLint 規(guī)則插件
"@vue/cli-plugin-router": "^5.0.8",
"@vue/cli-plugin-vuex": "^5.0.8",
"@vue/cli-service": "^5.0.8",

"@vue/eslint-config-standard": "^6.1.0",（當(dāng)前版本無法下載）				// vue standarad 風(fēng)格配置

"eslint": "^8.48.0",												// js代碼的質(zhì)量檢查工具
"eslint-config-prettier": "^9.0.0",							// 用 prettier 的規(guī)則，覆蓋掉 eslint:recommended 的部分規(guī)則
"eslint-plugin-prettier": "^5.0.0",							// 將prettier 的能力集成到 eslint 中
"eslint-plugin-vue": "^7.20.0",								// 用ESLint檢查.vue文件的<template>和<script>
"lint-staged": "^14.0.1",
"prettier": "^3.0.2",												// 代碼風(fēng)格的約束
"vue-eslint-parser": "^9.3.1",
"vue-template-compiler": "^2.7.14",

npm uninstall eslint babel-eslint --save-dev

package.json //提交代碼進(jìn)行eslint校驗

"gitHooks": {
    "pre-commit": "lint-staged"
  },

npm install prettier --save-dev

npm install --save-dev @babel/core @babel/eslint-parser @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-plugin-router @vue/cli-plugin-vuex @vue/cli-service eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue lint-staged prettier vue-eslint-parser vue-template-compiler

二。webstorm

1.

2.

3.

4.根目錄新建.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
      'plugin:vue/essential', 
      'plugin:vue/recommended', 
      'eslint:recommended', 
      'plugin:prettier/recommended'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

5.根目錄新建.prettierrc.js

module.exports = {
  eslintIntegration: true, 
  printWidth: 120, // 一行最多 120 字符(默認(rèn)80)
  tabWidth: 2, // 每個tab相當(dāng)于多少個空格（默認(rèn)2）
  useTabs: false, // 是否使用tab進(jìn)行縮進(jìn)（默認(rèn)false）
  semi: false, // 行尾需要有分號(默認(rèn)true)
  singleQuote: true, // 使用單引號（默認(rèn)false）
  quoteProps: 'as-needed', // 對象的 key 僅在必要時用引號
  jsxSingleQuote: false, // jsx 不使用單引號，而使用雙引號
  trailingComma: 'none', // 多行使用拖尾逗號（默認(rèn)none）
  bracketSpacing: true, // 在對象，數(shù)組括號與文字之間加空格 "{ foo: bar }"（默認(rèn)true）
  jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的結(jié)尾，而不是另起一行（默認(rèn)false）
  htmlWhitespaceSensitivity: 'css', // 根據(jù)顯示樣式?jīng)Q定 html 要不要折行
  arrowParens: 'avoid', // 只有一個參數(shù)的箭頭函數(shù)的參數(shù)是否帶圓括號（默認(rèn)avoid:添加括號）
  endOfLine: 'auto' // 行尾換行符
}

6.根目錄新建lint-staged.config.js

module.exports = {
  '*.{js,jsx,vue}': 'vue-cli-service lint'
}

7.重啟項目

tips
webstorm scss url報紅

三。vscode配置

1.安裝prettier、eslint

2.配置.vscode settings.json

{
  // 默認(rèn)使用prettier格式化
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  //配置 ESLint 檢查的文件類型
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "html", "vue"],

  // 代碼保存時，自動執(zhí)行ESlint格式化代碼
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

3.重啟vscode文章來源地址http://www.zghlxwxcb.cn/news/detail-787520.html

到了這里，關(guān)于Webstorm和VsCode 統(tǒng)一格式化配置的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！