前端项目vscode最优配置(vue3+ts)

一. vscode插件

  • vue-offical (vue3)
  • prettier eslint (在项目中配置prettierrc可使多人项目有相同的格式化规则,文后附prettierrc通用配置文件)
  • eslint
.prettierrc 复制代码
{
  "tabWidth": 2,
  "singleQuote": true,
  "semi": false,
  "trailingComma": "es5",
  "arrowParens": "always",
  "endOfLine": "auto",
  "printWidth": 100,
  "editor.formatOnSave": true
}

二. vscode 配置

  • setting.json
js 复制代码
{
  "editor.fontSize": 16,
  "editor.unicodeHighlight.ambiguousCharacters": false,
  "gitlens.ai.model": "anthropic:claude-3-5-sonnet-latest",
  "files.autoSave": "afterDelay",
  "editor.formatOnSave": true,
  "workbench.colorTheme": "Monokai Dimmed",
  "prettier.printWidth": 1000,
  //配置eslint
  "eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
  // "eslint.run": "onSave",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "editor.mouseWheelZoom": true,
  "editor.minimap.renderCharacters": false,
  "debug.javascript.defaultRuntimeExecutable": {
    "pwa-node": "node"
  },
  "open-in-browser.default": "{\"open-in-browser.default\":\"Chrome\"}",
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  "minapp-vscode.disableAutoConfig": true,
  "[python]": {
    "editor.formatOnType": true
  },
  "editor.detectIndentation": false,
  "explorer.compactFolders": false,
  // html使用prettier格式化
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    // "editor.defaultFormatter": "Vue.volar"
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // json使用prettier格式化
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.tabSize": 2,
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "px2rem.rootFontSize": 64,
  "px2rem.autoRemovePrefixZero": false
}
相关推荐
b1gbrother几秒前
让你的Claude Code变得更聪明
前端·程序员
掘金019 分钟前
吊炸天!Vue 3组件生命周期全掌控 —— 可复用Composable黑科技封装指南
vue.js
国家不保护废物9 分钟前
多模态模型数据传输的秘密武器:html5对象Blob深度解析
前端·面试·html
用户2519162427119 分钟前
Canvas之概述,画布与画笔
前端·javascript·canvas
南方kenny9 分钟前
前端小知识:搞懂 BFC块级格式化上下文,告别面试“拦路虎”!
前端·css·面试
邵洛10 分钟前
前端导出excel表格并修改导出表格样式
前端
风舞11 分钟前
JavaScript 核心概念及代码示例的梳理
前端
学长学姐我该怎么办12 分钟前
从零开始学前端html篇2
前端·html
尘世中一位迷途小书童13 分钟前
从零实现 Canvas 图形拖拽:让你的网页动起来!
前端
mrsk14 分钟前
JavaScript之变量的解构赋值全面解析(●'◡'●)
前端·javascript·面试