任先生的笔记库

# 一、setting.json

# 1、个性化配置

{
  "editor.fontSize": 14.5,
  "editor.tabSize": 2,
  "editor.mouseWheelZoom": true,
  "window.commandCenter": true,
  "workbench.sideBar.location": "right",

  "editor.formatOnSave": true
}

# 2、常用插件

{
  // 1、Comment Translate插件
  "commentTranslate.source": "Google",
  "commentTranslate.hover.string": true,
  "commentTranslate.multiLineMerge": true,
  "commentTranslate.targetLanguage": "zh-CN",
  "commentTranslate.googleTranslate.tld": "cn",

  // 2、Live Server插件
  "liveServer.settings.host": "localhost",
  "liveServer.settings.port": 8080,
  "liveServer.settings.CustomBrowser": "chrome",

  // 3、vscode-preview-server插件
  "previewServer.port": 8081,

  // 4、Power Mode插件
  "powermode.enabled": true,
  "powermode.presets": "flames",
  "powermode.shake.enabled": false,

  // 5、koroFileHeader
  "fileheader.customMade": {
    "Auther": "Lencamo",
    "Date": "Do not edit",
    "Description": "项目名字",
    "github": "https://github.com/Lencamo/",
    "LastEditTime": "Do not edit"
  },

  // 其他
  "cssrem.rootFontSize": 37.5,
  "markdown-preview-enhanced.previewTheme": "one-dark.css"
}

# 3、格式化插件 ✨

.prettierrc 
{
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "none",
  "semi": false,
  "singleQuote": true,
  "printWidth": 100
}

{
  // 1、Prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 本地
  "prettier.configPath": "~/.prettierrc",

  // 2、ESlint
  "eslint.lintTask.enable": true,
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "vue"],

  // 如果您使用 ESLint 作为默认格式化程序，则应在打开 editor.codeActionsOnSave 时关闭 editor.formatOnSave 。否则，您的文件将被修复两次，这是不必要的。
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  // 3、Vetur
  "vetur.format.enable": false // 禁用Vetur格式化功能

  // 4、Volar
  // 无
}

# 二、vscode 代码片段

文件 --> 首选项 --> 配置用户代码片段

https://snippet-generator.app/

# 1、html.json

包含：ren-vue2-.html、ren-vue3-.html

代码示例 
{
  "HTML5-vue2": {
    "prefix": "ren-vue2-.html", // 对应的是使用这个模板的快捷键
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"en\">",
      "\t<head>",
      "\t\t<meta charset=\"UTF-8\" />",
      "\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />",
      "\t\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" />",
      "\t\t<title>Document</title>",
      "\t\t<!-- <script src=\"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js\"></script> -->",
      "\t\t<script src=\"https://unpkg.com/vue@2/dist/vue.js\"></script>",
      "\t</head>\n",
      "\t<body>",
      "\t\t<div id=\"app\"></div>\n",
      "\t\t<script type=\"text/JavaScript\">",
      "\t\t\tnew Vue({",
      "\t\t\t\tel: '#app',",
      "\t\t\t\tdata: {",
      "\t\t\t\t\t//",
      "\t\t\t\t},",
      "\t\t\t});",
      "\t\t</script>",
      "\t</body>",
      "</html>\n"
    ],
    "description": "lencamo自定义的vue2非单页面模板" // 模板的描述
  },
  "HTML5-vue3": {
    "prefix": "ren-vue3-.html", // 对应的是使用这个模板的快捷键
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"en\">",
      "\t<head>",
      "\t\t<meta charset=\"UTF-8\" />",
      "\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />",
      "\t\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" />",
      "\t\t<title>Document</title>",
      "\t\t<!-- <script src=\"https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.min.js\"></script> -->",
      "\t\t<script src=\"https://unpkg.com/vue@3/dist/vue.global.js\"></script>",
      "\t</head>\n",
      "\t<body>",
      "\t\t<div id=\"app\"></div>\n",
      "\t\t<script>",
      "\t\t\tconst { createApp } = Vue\n",
      "\t\t\tcreateApp({",
      "\t\t\t\tdata() {",
      "\t\t\t\t\treturn {",
      "\t\t\t\t\t\t//",
      "\t\t\t\t\t}",
      "\t\t\t\t}",
      "\t\t\t}).mount('#app')",
      "\t\t</script>",
      "\t</body>",
      "</html>\n"
    ],
    "description": "lencamo自定义的vue3非单页面模板" // 模板的描述
  }
}

# 2、vue.json

包含：ren-ts-vue3

代码示例 
{
  "lencamo自定义的vue3+TS的.vue文件模板": {
    "prefix": "ren-ts-vue3",
    "body": [
      "<template>",
      "  <div class=\"${1:home}\">",
      "    <h2>${1:home}</h2>",
      "  </div>",
      "</template>",
      "",
      "<script setup lang=\"${2:ts}\">",
      "//$0"
      "</script>",
      "",
      "<style lang=\"${3:scss}\" scoped>",
      ".${1:home} {",
      "  //"
      "}",
      "</style>",
      ""
    ],
    "description": "lencamo自定义的vue3+TS的.vue文件模板"
  }
}

# 3、typescript.json

包含：ren-pinia-.ts

代码示例 
{
  "lencamo自定义的 pinia 的.js文件模板": {
    "prefix": "ren-pinia-.ts",
    "body": [
      "import { defineStore } from 'pinia'",
      "",
      "const use${1:Demo}Store = defineStore('${1:Demo}', {",
      "  state: () => ({",
      "    //$2",
      "  }),",
      "  getters: {",
      "    //$3",
      "  },",
      "  actions: {",
      "    //$0",
      "  }",
      "})",
      "",
      "export default use${1:Demo}Store"
    ],
    "description": "lencamo自定义的 pinia 的.js文件模板"
  }
}

# 4、javascript.json

包含：ren-node-.js

代码示例 
{
  "lencamo自定义的 http server 的.js文件模板": {
    "prefix": "ren-node-.js",
    "body": [
      "const { createServer } = require('http')",
      "",
      "const server = createServer()",
      "",
      "server.on('request', (req, res) => {",
      "  //",
      "",
      "  res.end()",
      "})",
      "",
      "server.listen(6061, () => {",
      "  console.log('Server running at http://localhost:6061')",
      "})",
      ""
    ],
    "description": "lencamo自定义的node服务的.js文件模板"
  }
}

# 三、快捷开发

# 1、常用快捷键

  • Ctrl + ~：打开终端
  • Ctrl + R：快速打开历史项目
  • ==
  • Ctrl + P：快速查找项目文件（输入>可进入开发人员模式）
  • Alt + number：快速切换项目文件（切换的顶部第 number 个已打开的文件）
  • Ctrl + W：快速当前打开的文件

# 2、keybindings.json

文件 --> 首选项 --> 键盘快捷方式

上下左右：alt + i k j l

回到行首：alt + h

回到行尾：alt + p

往下翻页：alt + o

往上翻页：alt + u

keybindings.json 
[
  //自定义区域
  {
    "key": "alt+i", // 上
    "command": "cursorUp",
    "when": "textInputFocus"
  },
  {
    "key": "up",
    "command": "cursorUp",
    "when": "textInputFocus"
  },
  {
    "key": "alt+i", // 上一页
    "command": "selectPrevSuggestion",
    "when": "suggestWidgetMultipleSuggestions && suggestWidgetVisible && textInputFocus"
  },
  {
    "key": "up",
    "command": "selectPrevSuggestion",
    "when": "suggestWidgetMultipleSuggestions && suggestWidgetVisible && textInputFocus"
  },
  {
    "key": "alt+k", // 下
    "command": "cursorDown",
    "when": "textInputFocus"
  },
  {
    "key": "down",
    "command": "cursorDown",
    "when": "textInputFocus"
  },
  {
    "key": "alt+k", // 下一页
    "command": "selectNextSuggestion",
    "when": "suggestWidgetMultipleSuggestions && suggestWidgetVisible && textInputFocus"
  },
  {
    "key": "down",
    "command": "selectNextSuggestion",
    "when": "suggestWidgetMultipleSuggestions && suggestWidgetVisible && textInputFocus"
  },
  {
    "key": "alt+j", // 左
    "command": "cursorLeft",
    "when": "textInputFocus"
  },
  {
    "key": "left",
    "command": "cursorLeft",
    "when": "textInputFocus"
  },
  {
    "key": "alt+l", // 右
    "command": "cursorRight",
    "when": "textInputFocus"
  },
  {
    "key": "right",
    "command": "cursorRight",
    "when": "textInputFocus"
  },
  {
    "key": "alt+h", // 行首
    "command": "cursorHome",
    "when": "textInputFocus"
  },
  {
    "key": "home",
    "command": "cursorHome",
    "when": "textInputFocus"
  },
  {
    "key": "alt+p", // 行末
    "command": "cursorEnd",
    "when": "textInputFocus"
  },
  {
    "key": "end",
    "command": "cursorEnd",
    "when": "textInputFocus"
  }
]
更新于 : 8/7/2024, 2:16:31 PM

← 样式和适配方案 →

Apache License 2.0 | Copyright © 2022 lencamo All Rights Reserved | 蜀ICP备2022012538号-2