前端项目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
}
相关推荐
我命由我1234516 分钟前
Vue 开发问题:Missing required prop: “value“
开发语言·前端·javascript·vue.js·前端框架·ecmascript·js
16年上任的CTO17 分钟前
一文讲清楚React中的key值作用与原理
前端·javascript·react.js·react key
快起来别睡了22 分钟前
Vue 中组件的生命周期与 v-if、v-show 的区别详解
前端·vue.js
阳火锅25 分钟前
在生产环境下,你真的有考虑到使用数组方法的健壮性吗?
前端·javascript·面试
孤月葬花魂36 分钟前
JavaScript 中的 Promise API 全面解析
前端·javascript
几道之旅37 分钟前
Electron 应用打包全指南
前端·javascript·electron
shushushu41 分钟前
Web如何自动播放音视频
前端·javascript
帅夫帅夫1 小时前
前端存储入门:Cookie 与用户登录状态管理
前端·架构
陈随易1 小时前
程序员的新玩具,MoonBit(月兔)编程语言科普
前端·后端·程序员
傻球1 小时前
前端实现文本描边
前端·canvas