前端项目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
}
相关推荐
东风西巷2 小时前
K-Lite Mega/FULL Codec Pack(视频解码器)
前端·电脑·音视频·软件需求
超级大只老咪2 小时前
何为“类”?(Java基础语法)
java·开发语言·前端
你的人类朋友5 小时前
快速搭建redis环境并使用redis客户端进行连接测试
前端·redis·后端
这里是杨杨吖5 小时前
SpringBoot+Vue医院预约挂号系统 附带详细运行指导视频
vue.js·spring boot·医院·预约挂号
深蓝电商API5 小时前
实战破解前端渲染:当 Requests 无法获取数据时(Selenium/Playwright 入门)
前端·python·selenium·playwright
bestcxx6 小时前
(二十七)、k8s 部署前端项目
前端·容器·kubernetes
鲸落落丶6 小时前
webpack学习
前端·学习·webpack
excel7 小时前
深入理解 3D 火焰着色器:从 Shadertoy 到 Three.js 的完整实现解析
前端
光影少年7 小时前
vue打包优化方案都有哪些?
前端·javascript·vue.js