【工具分享】VS Code 插件及配置

VS Code 插件及配置

配置设置

点击设置 -> 点击右上角打开设置(json)

其中editor.fontFamily中编辑器字体'Fira Code'需要额外安装, 请参考

{
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "prettier.printWidth": 120,

  "workbench.startupEditor": "none",
  "workbench.editor.empty.hint": "hidden",
  "workbench.iconTheme": "material-icon-theme",

  "security.workspace.trust.enabled": false,

  "window.commandCenter": false,

  "emmet.triggerExpansionOnTab": true,
  "emmet.showAbbreviationSuggestions": true,
  "emmet.includeLanguages": {
    "vue-html": "html",
    "javascript": "javascriptreact"
  },

  "explorer.compactFolders": false,

  "editor.tabSize": 2,
  "editor.formatOnSave": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.unicodeHighlight.ambiguousCharacters": false,
  "editor.unicodeHighlight.invisibleCharacters": false,
  "editor.suggest.snippetsPreventQuickSuggestions": false,
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.linkedEditing": true,
  "editor.inlineSuggest.enabled": true,
  "editor.stickyScroll.enabled": false,
  "editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace",
  // "editor.guides.bracketPairs": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },

  "diffEditor.ignoreTrimWhitespace": false,

  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.cursorStyle": "line",
  "terminal.integrated.persistentSessionReviveProcess": "never",
  "terminal.integrated.fontFamily": "Consolas",

  "files.associations": {
    "pages.json": "jsonc",
    "manifest.json": "jsonc"
  },

  // px to rem & rpx & vw
  "cssrem.vw": true,

  // Easy Less
  // "less.compile": { "out": "../css/" },

  // Project Manager
  "projectManager.git.baseFolders": ["D:\\Projects\\All", "E:\\Projects"],
  "projectManager.openInNewWindowWhenClickingInStatusBar": true,

  // uni-create-view
  "create-uniapp-view.directory": true,
  "create-uniapp-view.template": "vue3",
  "create-uniapp-view.name": "与文件夹同名",
  "create-uniapp-view.typescript": false,
  
  // TODO Highlight
  "todohighlight.include": [
    "**/*.vue",
    "**/*.js",
    "**/*.jsx",
    "**/*.ts",
    "**/*.tsx",
    "**/*.html",
    "**/*.css",
    "**/*.scss"
  ]
}

插件列表

插件安装

1. 在文件根目录新建.vscode/extensions.json文件

2. 复制以下插件目录至文件

   {
     "recommendations": [
       "formulahendry.auto-rename-tag",
       "ms-ceintl.vscode-language-pack-zh-hans",
       "formulahendry.code-runner",
       "w88975.code-translate",
       "mikestead.dotenv",
       "usernamehw.errorlens",
       "dsznajder.es7-react-js-snippets",
       "dbaeumer.vscode-eslint",
       "huizhou.githd",
       "kisstkondoros.vscode-gutter-preview",
       "mariusalchimavicius.json-to-ts",
       "ritwickdey.liveserver",
       "pkief.material-icon-theme",
       "wosi.omnipascal",
       "techer.open-in-browser",
       "christian-kohler.path-intellisense",
       "esbenp.prettier-vscode",
       "alefragnani.project-manager",
       "cipchk.cssrem",
       "ms-vscode-remote.remote-ssh",
       "syler.sass-indented",
       "bradlc.vscode-tailwindcss",
       "rangav.vscode-thunder-client",
       "wayou.vscode-todo-highlight",
       "mrmaoddxxaa.create-uniapp-view",
       "uni-helper.uni-helper-vscode",
       "evils.uniapp-vscode",
       "antfu.unocss",
       "vue.volar",
       "mrcrowl.easy-less",
       "zhuangtongfa.material-theme"
     ]
   }
   

3. 点击左侧扩展图标，输入框搜索@recommended

4. 安装工作区推荐扩展即可

代码片段

点击设置 -> 用户代码片段

全局代码片段

{
  "Print to log": {
    "prefix": "clog",
    "body": ["console.log($1)"]
  },

  "Print to dir": {
    "prefix": "cdir",
    "body": ["console.dir($1)"]
  },
  
  "Print to arrow": {
    "prefix": "jt",
    "body": ["() => {$1}"]
  }
}

Vue代码片段

{
  "Print to Vue3": {
    "prefix": "vue3",
    "body": [
      "<script setup>",
      "",
      "</script>",
      "",
      "<template>",
      "  <div>",
      "    ${1:app}",
      "  </div>",
      "</template>",
      "",
      "<style scoped>",
      "",
      "</style>",
      ""
    ],
    "description": "Print to Vue3"
  },

  "Print to Vue3-TS": {
    "prefix": "vue3-ts",
    "body": [
      "<script setup lang=\"ts\">",
      "",
      "</script>",
      "",
      "<template>",
      "  <div>",
      "    ${1:app}",
      "  </div>",
      "</template>",
      "",
      "<style scoped>",
      "",
      "</style>",
      ""
    ],
    "description": "Print to Vue3-TS"
  },

  "Print to Vue2": {
    "prefix": "vue2",
    "body": [
      "<template>",
      "  <div>",
      "    ${1:app}",
      "  </div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  name: '${1:app}',",
      "  data () {",
      "    return {}",
      "  },",
      "",
      "  methods: {}",
      "}",
      "</script>",
      "",
      "<style scoped>",
      "",
      "</style>"
    ],
    "description": "Print to Vue2"
  },

  "Print to Vue-uni": {
    "prefix": "vue2-uni",
    "body": [
      "<template>",
      "  <view>",
      "    ${1:app}",
      "  </view>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  name: '${1:app}',",
      "  data () {",
      "    return {}",
      "  },",
      "",
      "  onLoad () {},",
      "",
      "  onReady () {},",
      "",
      "  onShow () {},",
      "",
      "  onHide () {},",
      "",
      "  methods: {}",
      "}",
      "</script>",
      "",
      "<style scoped>",
      "",
      "</style>"
    ],
    "description": "Print to Vue-uni"
  }
}

​