Skip to content

GitLab

Closed
Created by liuyajun@liuyajunMaintainer

项目内约束 vscode 插件及配置

背景

第一次接触项目的小伙伴（新人、外部支援的小伙伴），需要询问项目组开发或阅读 README.md，才能知道该项目所需要的 vscode 插件及配置

目的

  • 提供项目必须的基础插件、配置
  • 统一插件、配置
  • 减少沟通成本、探索成本

解决方案

插件

1. 获取插件ID

image

2. 项目根目录新建

.vscode/extensions.json

{
  "recommendations": [
    "stylelint.vscode-stylelint",
    "eg2.vscode-npm-script"
  ]
}

3. 使用

  1. 第一次打开项目右下角会进行提示，是否安装项目推荐插件，选择“是”将一键安装
  2. 也可以在扩展列表查看

image

项目配置

项目根目录新建 .vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll": false,
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true,
  },
  "editor.fontSize": 16,
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  "editor.tabSize": 2,

  // 保存文件时是否自动修复
  "eslint.alwaysShowStatus": true,
  "eslint.codeActionsOnSave.mode": "all", // all 一次性修复所有可能的问题，problems 只修复当前的问题（逐个修复）
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue-html",
    "html",
    "vue",
    "wpy",
    "wxml",
    "wxss",
    "cjson",
    "wxs",
    "typescript",
    "typescriptreact",
  ],

  // stylelint 校验的文件类型
  "stylelint.validate": [
    "css",
    "postcss",
    "less",
    "scss",
    "sass",
    "vue"
  ],

  // TODO 代办事项高亮
  // https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree
  "todo-tree.general.tags": [
    "TODO",
    "FIXME",
    "todo"
  ],
  "todo-tree.highlights.defaultHighlight": {
    "icon": "pin", // 侧边栏todos图标
    "iconColour": "#E6A23C",
    /* 类型：tag 高亮todo，line 高亮整行
    tag - highlights just the tag
    text - highlights the tag and any text after the tag
    tag-and-comment - highlights the comment characters (or the start of the match) and the tag
    text-and-comment - highlights the comment characters (or the start of the match), the tag and the text after the tag
    line - highlights the entire line containing the tag
    whole-line - highlights the entire line containing the tag to the full width of the editor */
    "type": "text-and-comment",
    "foreground": "#fff",
    "background": "#E6A23C",
    "opacity": 100,
    "borderRadius": "2px",
    "fontWeight": "700"
  },
}
Edited by liuyajun