一、工作區(qū)配置

通常不同的項(xiàng)目都有不同的配置，我一般都是使用eslint和prettier一起用，所以經(jīng)常會(huì)有這幾個(gè)文件：

這里簡(jiǎn)單介紹一下這幾個(gè)文件的作用吧。

1.vscode文件夾下

一般有兩個(gè)文件，extensions.json和settings.json。

extensions.json

文件是用來(lái)配置推薦安裝的 VS Code 插件的文件。在這個(gè)文件中，你可以列出你項(xiàng)目中推薦使用的一些插件，當(dāng)你打開(kāi)項(xiàng)目時(shí)，VS Code 會(huì)自動(dòng)提示你是否安裝這些插件。

比如：

{

? "recommendations": ["johnsoncodehk.volar", "esbenp.prettier-vscode","dbaeumer.vscode-eslint"]

}

這三個(gè)插件分別代表：

1. johnsoncodehk.volar: 與 Vue.js 相關(guān)的插件，提供了更好的 Vue.js 開(kāi)發(fā)體驗(yàn)。

2. esbenp.prettier-vscode: Prettier 的 VS Code 插件，用于格式化代碼。

3. dbaeumer.vscode-eslint: ESLint 的 VS Code 插件，用于提供 ESLint 集成支持。

settings.json

這是VS Code 中的設(shè)置文件一般用來(lái)設(shè)置項(xiàng)目的開(kāi)發(fā)配置，比如常見(jiàn)的都是這些配置：

{
  "window.title": "Admin", //設(shè)置 VS Code 窗口標(biāo)題

  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.detectIndentation": false,
  "editor.formatOnPaste": false,
  "editor.formatOnSave": true,
  "editor.wordWrap": "on",  //啟用文本換行
  "eslint.alwaysShowStatus": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    "html",
    {
      "language": "vue",
      "autoFix": true
    }
  ],

  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "[jsonc]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.tabSize": 2,
  "diffEditor.ignoreTrimWhitespace": false,
  "files.associations": {
    "*.vue": "vue"
  },
  
  "editor.suggestSelection": "first",
  
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "prettier.tabWidth": 2,//指定 Prettier 的縮進(jìn)寬度為 2 個(gè)空格
  "prettier.semi": false,
  "prettier.jsxSingleQuote": true,
  "prettier.singleQuote": true,
  "prettier.eslintIntegration": true, // 讓prettier遵循eslint格式美化

  // "[json]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },
  "files.exclude": {
    // ".dockerignore": true,
    // ".editorconfig": true,
    // ".eslint*": true,
    // ".travis*": true,
    // "babel*": true,
    // "package-lock*": true,
    // "postcss*": true,
    // "nginx*": true,
    // ".git*": true,
    // ".pretti*": true,
    // ".vscode": true,
    // ".stylelintrc.json": true,
    // "*.md": true,
    // "*.toml": true,
    // "*firebase*": true,
    // "appveyor.yml": true,
    // "dist": true,
    // "Dock*": true,
    // "jest*": true,
    // "node_modules": true,
    // "README*": true
  },
  "javascript.format.enable": true, // 不啟動(dòng)JavaScript格式化
  "files.autoSave": "onFocusChange",
  
  "eslint.options": {
    // "plugins": ["html"]
  },
  // "workbench.statusBar.feedback.visible": false,
  "vetur.format.options.tabSize": 2, //Vue 文件中的縮進(jìn)大小
  "vetur.format.defaultFormatter.css": "prettier",
  "merge-conflict.autoNavigateNextConflict.enabled": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"  //保存時(shí)執(zhí)行 ESLint 修復(fù)
  },
  "[scss]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "prettier.requireConfig": true,
  "editor.guides.indentation": false,
  "editor.guides.highlightActiveIndentation": false,
  "workbench.editor.empty.hint": "hidden" //隱藏空白編輯器的提示，可以根據(jù)個(gè)人偏好進(jìn)行配置
}

一般都是需要什么配置去找什么配置，當(dāng)前只有這兩個(gè)還是不太行，一般還需要其他的文件來(lái)輔助。

2.根目錄下

eslintrc.js? ?和 prettierrc ，看名字就知道都是干啥的，一般會(huì)有這樣的配置：

.eslintrc.js?

module.exports = {
  root: true,
  env: {
    browser: true,
    commonjs: true,
    es6: true,
    node: true
  },

  globals: {
    defineEmits: true,
    document: true,
    localStorage: true,
    GLOBAL_VAR: true,
    window: true,
    defineProps: true,
    defineExpose: true,
    $ref: true
  },
  plugins: ['@typescript-eslint', 'prettier', 'import'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/vue3-recommended',
    'prettier',
    './.eslintrc-auto-import.json'
  ],
  parserOptions: {
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
      tsx: true
    }
  },
  rules: {
    //close lf error
    'import/no-unresolved': [0],
    'vue/multi-word-component-names': 'off',
    'vue/no-deprecated-router-link-tag-prop': 'off',
    'import/extensions': 'off',
    'import/no-absolute-path': 'off',
    'no-async-promise-executor': 'off',
    'import/no-extraneous-dependencies': 'off',
    'vue/no-multiple-template-root': 'off',
    'vue/html-self-closing': 'off',
    'no-console': 'off',
    'no-plusplus': 'off',
    'no-useless-escape': 'off',
    'no-bitwise': 'off',
    '@typescript-eslint/no-explicit-any': ['off'],
    '@typescript-eslint/explicit-module-boundary-types': ['off'],
    '@typescript-eslint/ban-ts-comment': ['off'],
    'vue/no-setup-props-destructure': ['off'],
    '@typescript-eslint/no-empty-function': ['off'],
    'vue/script-setup-uses-vars': ['off'],
    //can config  to 2 if need more then required
    '@typescript-eslint/no-unused-vars': [0],
    'no-param-reassign': ['off']
  }
}

解釋如下：?

• root: true: 表示 ESLint 應(yīng)該停止在父級(jí)目錄中查找其他配置文件。

• env: 定義了代碼運(yùn)行的環(huán)境。這里包括瀏覽器、CommonJS、ES6 和 Node.js。

• globals: 定義了全局變量，這樣 ESLint 不會(huì)發(fā)出未定義的錯(cuò)誤。這里列出了一些常見(jiàn)的全局變量，比如 document、localStorage、window 等。

• plugins: 插件列表，這里包括 @typescript-eslint、prettier 和 import。這些插件提供了額外的規(guī)則和功能。

• extends: 繼承了一系列預(yù)設(shè)的規(guī)則集，包括了一些推薦的規(guī)則，TypeScript 相關(guān)的規(guī)則，Vue3 推薦的規(guī)則，以及 Prettier 的規(guī)則。

• parserOptions: 定義了解析器選項(xiàng)，這里使用了 TypeScript 解析器 @typescript-eslint/parser，并設(shè)置了一些選項(xiàng)，如支持 JSX 和 TSX。

• rules: 定義了具體的規(guī)則配置。這里關(guān)閉了一些規(guī)則，例如關(guān)閉了一些 import 相關(guān)的規(guī)則、關(guān)閉了一些 TypeScript 相關(guān)的規(guī)則、關(guān)閉了一些 Vue 相關(guān)的規(guī)則等。每個(gè)規(guī)則的具體含義可以根據(jù)規(guī)則的名稱(chēng)查找 ESLint 文檔進(jìn)行了解

.prettierrc

{
    "useTabs": false,
    "tabWidth": 2,
    "printWidth": 120,
    "singleQuote": true,
    "trailingComma": "none",
    "bracketSpacing": true,
    "semi": false,
    "htmlWhitespaceSensitivity": "ignore"
}

• useTabs: 表示是否使用制表符（Tab）進(jìn)行縮進(jìn)。如果設(shè)置為 false，則使用空格進(jìn)行縮進(jìn)。

• tabWidth: 表示縮進(jìn)的空格數(shù)目。如果使用空格進(jìn)行縮進(jìn)，定義每級(jí)縮進(jìn)的空格數(shù)。

• printWidth: 表示代碼行的最大寬度，超過(guò)這個(gè)寬度則進(jìn)行換行。

• singleQuote: 表示是否使用單引號(hào)。如果設(shè)置為 true，則使用單引號(hào)；如果設(shè)置為 false，則使用雙引號(hào)。

• trailingComma: 表示對(duì)象、數(shù)組等最后一個(gè)元素后是否加逗號(hào)?？蛇x值為 "none"、"es5"、"all"。

• bracketSpacing: 表示花括號(hào)是否有空格。如果設(shè)置為 true，則花括號(hào)內(nèi)部有空格。

• semi: 表示是否使用分號(hào)作為語(yǔ)句的結(jié)束符。如果設(shè)置為 false，則不使用分號(hào)。

• htmlWhitespaceSensitivity: 表示 HTML 文件中空格的敏感性。可選值為 "css"（保留 CSS 規(guī)則的空格）和 "ignore"（忽略空格）。

這些配置項(xiàng)用于規(guī)范代碼風(fēng)格，確保團(tuán)隊(duì)成員之間的代碼風(fēng)格一致。 Prettier 會(huì)根據(jù)這些配置對(duì)代碼進(jìn)行格式化。

除此之外，還可以引入這些配置：

.eslintrc-auto-import.json??

定義全局變量，以避免 ESLint 報(bào)告這些變量未定義的錯(cuò)誤

?比如：

{
  "globals": {
    "axiosReq": true,
    "computed": true,
    "createApp": true,
    "createLogger": true,
    "createNamespacedHelpers": true,
    "createStore": true,
    "customRef": true,
    "defineAsyncComponent": true,
    "defineComponent": true,
    "effectScope": true,
    "EffectScope": true,
    "getCurrentInstance": true,
    "getCurrentScope": true,
    "h": true,
    "inject": true,
    "isReadonly": true,
    "isRef": true,
    "mapActions": true,
    "mapGetters": true,
    "mapMutations": true,
    "mapState": true,
    "markRaw": true,
    "nextTick": true,
    "onActivated": true,
    "onBeforeMount": true,
    "onBeforeUnmount": true,
    "onBeforeUpdate": true,
    "onDeactivated": true,
    "onErrorCaptured": true,
    "onMounted": true,
    "onRenderTracked": true,
    "onRenderTriggered": true,
    "onScopeDispose": true,
    "onServerPrefetch": true,
    "onUnmounted": true,
    "onUpdated": true,
    "provide": true,
    "reactive": true,
    "readonly": true,
    "ref": true,
    "resolveComponent": true,
    "shallowReactive": true,
    "shallowReadonly": true,
    "shallowRef": true,
    "toRaw": true,
    "toRef": true,
    "toRefs": true,
    "triggerRef": true,
    "unref": true,
    "useAttrs": true,
    "useCommon": true,
    "useCssModule": true,
    "useCssVars": true,
    "useElement": true,
    "useRoute": true,
    "useRouter": true,
    "useSlots": true,
    "useStore": true,
    "useVueRouter": true,
    "watch": true,
    "watchEffect": true
  }
}

這些變量看起來(lái)是與 Vue 3 和 Vue 相關(guān)的一些功能和 API 相關(guān)的，包括 ref、reactive、computed、provide、watch、watchEffect 等。

通過(guò)將這些變量添加到 globals 字段中，告訴 ESLint 這些變量是全局可用的，不需要在代碼中顯式聲明或?qū)搿?/p>

這種做法有助于提高開(kāi)發(fā)效率，同時(shí)確保代碼中使用的全局變量能夠被正確地識(shí)別和檢查，而不會(huì)導(dǎo)致未定義的錯(cuò)誤。

?

?.eslintignore

用于配置 ESLint 忽略檢查的文件和目錄。?

public
node_modules
.history
.husky
src/static
src/components/*
src/uni_modules/*
src/utils/*
dist
axios
*.d.ts

public: 忽略 public 目錄下的文件和子目錄。
node_modules: 忽略 node_modules 目錄下的文件和子目錄。
.history: 忽略 .history 目錄下的文件和子目錄。
.husky: 忽略 .husky 目錄下的文件和子目錄。
src/static: 忽略 src/static 目錄下的文件和子目錄。
src/components/*: 忽略 src/components 目錄下的所有文件。
src/uni_modules/*: 忽略 src/uni_modules 目錄下的所有文件。
src/utils/*: 忽略 src/utils 目錄下的所有文件。
dist: 忽略 dist 目錄下的文件和子目錄。
axios: 忽略 axios 文件。
*.d.ts: 忽略以 .d.ts 結(jié)尾的文件。
這些規(guī)則用于告訴 ESLint 在檢查代碼時(shí)忽略這些文件和目錄，通常用于排除一些不需要進(jìn)行代碼檢查的文件或者由工具生成的文件。

?.editorconfig

用于配置代碼編輯器的行為，以確保在不同編輯器中保持一致的代碼風(fēng)格

# https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

• root = true: 表示這是最頂層的 .editorconfig 文件，編輯器在查找 .editorconfig 文件時(shí)將停止搜索。

• [*]: 適用于所有文件的默認(rèn)配置。

  • charset = utf-8: 文件編碼使用 UTF-8。
  • indent_style = space: 縮進(jìn)使用空格。
  • indent_size = 2: 縮進(jìn)大小為 2 個(gè)空格。
  • end_of_line = lf: 換行符使用 LF (Unix 風(fēng)格)。
  • insert_final_newline = true: 在文件的末尾插入一個(gè)空白行。
  • trim_trailing_whitespace = true: 去除行尾的空格。

• [*.md]: 適用于 Markdown 文件的配置。

  • insert_final_newline = false: 不在 Markdown 文件的末尾插入空白行。
  • trim_trailing_whitespace = false: 不去除 Markdown 文件行尾的空格。

這些設(shè)置旨在提供一致的編輯器配置，以避免因編輯器不同而引起的格式化問(wèn)題。例如，它確保所有文件都使用相同的字符集、縮進(jìn)風(fēng)格等。

?

上面這些是不用的工作區(qū)，或者說(shuō)是不同的項(xiàng)目之間的配置，下面是自己的vscode的一些配置，當(dāng)然如果有上面的配置，用戶(hù)配置只是補(bǔ)充

二、用戶(hù)配置

點(diǎn)擊設(shè)置，隨便搜點(diǎn)啥，點(diǎn)擊這個(gè)鏈接就到了用戶(hù)設(shè)置里，當(dāng)然也可以根據(jù)此來(lái)進(jìn)行工作區(qū)的設(shè)置，這里有中文，比較方便。

{
  // 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": false
    }
  ],
  // //火花組件的配置
  // "powermode.enabled": true, //啟動(dòng)
  // "powermode.presets": "flames", // 火花效果
  // "powermode.enableShake": true, // 去除代碼抖動(dòng)
  // "powermode.shake.enabled": false,
  // "powermode.combo.counterEnabled": "hide",
  // "powermode.combo.timerEnabled": "hide",
  // #這個(gè)按用戶(hù)自身習(xí)慣選擇
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #讓vue中的js按編輯器自帶的ts格式進(jìn)行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // #vue組件中html代碼格式化樣式
    }
  },
  // // 格式化stylus, 需安裝Manta's Stylus Supremacy插件
  // "stylusSupremacy.insertColons": false, // 是否插入冒號(hào)
  // "stylusSupremacy.insertSemicolons": false, // 是否插入分好
  // "stylusSupremacy.insertBraces": false, // 是否插入大括號(hào)
  // "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行
  // "stylusSupremacy.insertNewLineAroundBlocks": false,

  //代碼格式化
  // vscode默認(rèn)啟用了根據(jù)文件類(lèi)型自動(dòng)設(shè)置tabsize的選項(xiàng)
  "editor.detectIndentation": false,
  // 重新設(shè)定tabsize
  "editor.tabSize": 2,
  // #每次保存的時(shí)候自動(dòng)格式化
  "editor.formatOnSave": true,
  "files.autoSave": "onFocusChange",
  "files.autoSaveDelay": 3000,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "never"
  },
  "editor.semanticTokenColorCustomizations": {
    "[Default Dark+]": {}
  },
  //  #使用帶引號(hào)替代雙引號(hào)
  // "prettier.singleQuote": false,
  //  #讓函數(shù)(名)和后面的括號(hào)之間加個(gè)空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,

  // "tabnine.experimentalAutoImports": true,
  // "emmet.preferences": {},
  // "prettier.jsxSingleQuote": false,
  // "html.completion.attributeDefaultValue": "singlequotes",
  // "[vue]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },
  //關(guān)閉vetur標(biāo)簽閉合檢查（用于解決iview標(biāo)簽報(bào)錯(cuò)）
  "explorer.confirmDelete": true,
  //auto Rename tag
  "editor.linkedEditing": true,
  //auto close tags
  "html.autoClosingTags": true,
  "javascript.autoClosingTags": true,
  "typescript.autoClosingTags": true,
  //auto import 為JavaScript//TypeScript使用auto-import suggestions,.在文件移動(dòng)時(shí)更新導(dǎo)入，并在top使用絕對(duì)路徑組織導(dǎo)入。
  "javascript.suggest.autoImports": true,
  "typescript.suggest.autoImports": true,

  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.updateImportsOnFileMove.enabled": "always",
  //括號(hào)顏色和水平
  "editor.bracketPairColorization.independentColorPoolPerBracketType": true,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "cSpell.userWords": ["pview"],
  "editor.accessibilitySupport": "off",
  "merge-conflict.autoNavigateNextConflict.enabled": true,
  "volar.autoCompleteRefs": true,
  "cSpell.languageSettings": [],
  "prettier.semi": false,
  "tabnine.experimentalAutoImports": true,
  "workbench.editorAssociations": {
    "*.ttf": "default"
  },
  "prettier.singleQuote": true,
  "prettier.jsxSingleQuote": true,
  "workbench.colorTheme": "Monokai Dimmed",
  "C_Cpp.commentContinuationPatterns": ["/**"],
  "git.suggestSmartCommit": false,
  "git.confirmSync": false,
  "window.zoomLevel": 1,
  "editor.fontVariations": false
}

?我上面的配置是自己常用的，可以參考，基本每一個(gè)配置都有對(duì)應(yīng)的中文解釋?zhuān)梢院芊奖愕目炊?/p>

over~?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-819623.html

到了這里，關(guān)于VScode 工作區(qū)配置 和 用戶(hù)配置的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！