【前端财富】前端工程师装机指南 (windows10)

{
    "VUE3.0": {
        "prefix": "vv3",
        "body": [
            "<template>",
            "  <div>\n",
            "  </div>",
            "</template>\n",
            "<script lang='ts'>",
            "import { defineComponent } from 'vue';\n",
            "export default defineComponent({",
            "  name: '$1',",
            "  setup() {",
            "    return {};",
            "  },",
            "});",
            "</script>\n",
            "<style lang='scss'>\n",
            "</style>\n"
        ],
        "description": "Create vue template"
    },
    "VUE3setp": {
        "prefix": "v3set",
        "body": [
            "<template>",
            "  <div class=''>\n",
            "  </div>",
            "</template>\n",
            "<script lang='ts' setup>",
            "</script>\n",
            "<style lang='scss'>\n",
            "</style>\n"
        ],
        "description": "Create vue template"
    },
    "fn": {
        "scope": "javascript,typescript",
        "prefix": "fn",
        "body": [
            "const $1 = ($2)=>{$3}"
        ],
        "description": "fn"
    },
    "refn": {
        "scope": "javascript,typescript",
        "prefix": "vref",
        "body": [
            "const $1 = ref($2)"
        ],
        "description": "vref"
    },
    "computedfn": {
        "scope": "javascript,typescript",
        "prefix": "vcomputed",
        "body": [
            "const $1  = computed(($2) => {",
            "$3",
            "})"
        ],
        "description": "vcomputed"
    },
    "port": {
        "scope": "javascript,typescript",
        "prefix": "port",
        "body": [
            "import $1 from '$2'"
        ],
        "description": "port"
    },
    "reactive": {
        "scope": "javascript,typescript",
        "prefix": "vreactive",
        "body": [
            "const state$1 = reactive({",
            "$2",
            "});"
        ],
        "description": "vreactive"
    },
    "Print to console": {
        "scope": "javascript,typescript",
        "prefix": "log",
        "body": [
            "console.log('🚀🚀~ $1:',$1);"
        ],
        "description": "Log output to console"
    }
}

{
  //! `````````````````````````````````````````````````````````编辑器外观设置```````````````````````````````````````````````````````
  // 编辑器文件图标主题
  "workbench.iconTheme": "vscode-great-icons",
  // 编辑器主题
  "workbench.colorTheme": "Community Material Theme Palenight High Contrast",
  // 代码字体和颜色
  "editor.tokenColorCustomizations": {
    "comments": {
      // 设置字体样式 加粗 下划线 斜体等
      "fontStyle": "",
      // 设置字体颜色
      "foreground": "#08a43b",
    },
  },
  //Highlight Matching Tag 的颜色
  "highlight-matching-tag.styles": {
    "opening": {
      "name": {
        "underline": "#fff",
        "highlight": "#08a43b"
      }
    }
  },
  // 代码注释高亮颜色
  "better-comments.tags": [
    {
      "tag": "!",
      "color": "#FF2D00",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "?",
      "color": "#3498DB",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "//",
      "color": "#474747",
      "strikethrough": true,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "todo",
      "color": "#FF8C00",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "*",
      "color": "#08a43b",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    }
  ],
  //! `````````````````````````````````````````````````````````编辑器自身设置```````````````````````````````````````````````````````
  // 对 {{#foo}} 和 {{/foo}} 进行格式化与缩进。
  "html.format.indentHandlebars": true,
  // 缩进 "" 和 "" 部分。
  "html.format.indentInnerHtml": true,
  // 控制编辑器是否自动格式化粘贴的内容。格式化程序必须可用，并且能针对文档中的某一范围进行格式化
  "editor.formatOnPaste": true,
  // 在保存时格式化文件。格式化程序必须可用，延迟后文件不能保存，并且编辑器不能关闭。
  "editor.formatOnSave": true,
  // 控制编辑器在键入一行后是否自动格式化该行。
  "editor.formatOnType": true,
  // 当编辑器失去焦点时，将自动保存未保存的编辑器。
  "files.autoSave": "onFocusChange",
  // 一个制表符等于的空格数
  "editor.tabSize": 2,
  // 通过使用鼠标滚轮同时按住 Ctrl 可缩放编辑器的字体
  "editor.mouseWheelZoom": false,
  //修改标签时，同时修改头和尾标签
  "editor.linkedEditing": true,
  //显示空格
  "editor.renderWhitespace": "all",
  //搜索排除目录
  "search.exclude": {
    "**/node_modules": true,
    "**/.history": true
  },
  //在一定数量的字符后显示标尺
  "editor.rulers": [
    120
  ],
  // 保存自动修复eslint
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 启用后，差异编辑器将忽略前导空格或尾随空格中的更改。
  "diffEditor.ignoreTrimWhitespace": false,
  /*
     ** 默认行尾字符。
     ** - \n: LF
     ** - \r\n: CRLF
     ** - auto: 使用具体操作系统规定的行末字符。
     */
  "files.eol": "\n",
  // 针对 [shellscript] 语言，配置替代编辑器设置。
  "[shellscript]": {
    "files.eol": "\n"
  },
  //控制如何处理在受信任的工作区中打开不受信任的文件  open: 始终允许不受信任的文件引入受信任的工作区，而不显示提示。
  "security.workspace.trust.untrustedFiles": "open",
  // 配置语言的文件关联 (如: `"*.extension": "html"`)。这些关联的优先级高于已安装语言的默认关联。
  "files.associations": {
    "*.vue": "vue",
    ".prettierrc.json": "jsonc"
  },
  /*
     ** 控制编辑器是否应运行在对屏幕阅读器进行优化的模式。
     **  - auto: 编辑器将使用平台 API 以检测是否附加了屏幕阅读器。
     **  - on: 编辑器将对屏幕阅读器的使用进行永久优化。
     **  - off: 编辑器将不再对屏幕阅读器的使用进行优化。
     */
  "editor.accessibilitySupport": "off",
  // 控制资源管理器是否在把文件删除到回收站时进行确认。
  "explorer.confirmDelete": true,
  // 定义一个默认格式化程序, 该格式化程序优先于所有其他格式化程序设置。必须是提供格式化程序的扩展的标识符。
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 控制"转到定义"鼠标手势是否始终打开预览小部件。
  "editor.definitionLinkOpensInPeek": true,
  // 控制编辑器是否突出显示语义符号的匹配项。
  "editor.occurrencesHighlight": false,
  // 控制编辑器是否仅在焦点在编辑器时突出显示当前行。
  "editor.renderLineHighlightOnlyWhenFocus": true,
  // 控制编辑器是否显示控制字符。
  "editor.renderControlCharacters": true,
  // 启用后，将在保存文件时删除行尾的空格。
  "files.trimTrailingWhitespace": true,
  // 是否在解决合并冲突后自动转到下一个合并冲突
  "merge-conflict.autoNavigateNextConflict.enabled": true,
  // 启用后，按下 TAB 键，将展开 Emmet 缩写。
  "emmet.triggerExpansionOnTab": true,
  // force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。
  "html.format.wrapAttributes": "force-aligned",
  // 定义一个默认格式化程序, 该格式化程序优先于所有其他格式化程序设置。必须是提供格式化程序的扩展的标识符。
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[css]": {
    "editor.defaultFormatter": "vscode.css-language-features",
  },
  "[sass]": {
    "editor.defaultFormatter": "johnsoncodehk.volar",
  },
  "[scss]": {
    "editor.defaultFormatter": "vscode.css-language-features",
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  //! `````````````````````````````````````````````````````````拓展插件设置```````````````````````````````````````````````````````
  //? `````````````````````````````````prettier相关````````````````````````````````````````````````````````````/
  //使用单引号
  "prettier.singleQuote": true,
  //行尾分号
  "prettier.semi": true,
  //tab健尺寸
  "prettier.tabWidth": 2,
  //在对象或数组最后一个元素后面是否加逗号
  "prettier.trailingComma": "all",
  //  prettier-在对象，数组括号与文字之间加空格 "{ foo: bar }"
  "prettier.bracketSpacing": true,
  // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
  "prettier.arrowParens": "always",
  "terminal.integrated.allowMnemonics": true,
  "terminal.integrated.automationShell.linux": "", // 不让prettier使用tslint的代码格式进行校验
  //? ```````````````````````````````````eslint相关````````````````````````````````````````````````````````````/
  //定义哪些文件需要进行eslint验证
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "json"
  ],
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  //? ```````````````````````````````````console相关````````````````````````````````````````````````````````````/
  // 图案
  "turboConsoleLog.logMessagePrefix": "🚀🚀",
  // 是否包含文件名和行数
  "turboConsoleLog.includeFileNameAndLineNum": false,
  // 行尾添加分号
  "turboConsoleLog.addSemicolonInTheEnd": true,
  // 使用单引号
  "turboConsoleLog.quote": "'",
  //是否包含函数名
  "turboConsoleLog.insertEnclosingFunction": false,
  //? ```````````````````````````````````````注释相关`````````````````````````````````````````````````````````````````*/
  //自动生成注释插件  文件头部注释
  "fileheader.customMade": {
    "Author": "一尾流莺",
    "Description": "",
    "Date": "Do not edit",
    "LastEditTime": "Do not edit",
    "FilePath": ""
  },
  //自动生成注释插件  函数注释
  "fileheader.cursorMode": {
    "description": "",
    "param": "",
    "return": ""
  },
  //? `````````````````````````````````````vetur相关````````````````````````````````````````````````````````````*/
  // 所有默认格式化程序的选项
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_line_length": 999,
      "wrap_attributes": "force-aligned",
      "end_with_newline": false,
      "indent_with_tabs": false
    },
    "prettyhtml": {
      "printWidth": 200,
      "singleQuote": true,
      "wrapAttributes": false,
      "sortAttributes": false
    },
    "prettier": {
      "semi": false,
      "singleQuote": true,
      "trailingComma": "all"
    }
  },
  //启用vetur验证
  "vetur.format.enable": true,
  //js的格式化方式
  "vetur.format.defaultFormatter.js": "prettier",
  //html的格式化方式
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  //html的格式化方式
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.sass": "sass-formatter",
  // Enable template interpolation service that offers diagnostics / hover / definition / references
  "vetur.experimental.templateInterpolationService": false,
  //! ```````````````````````````````````````````````````````typescript相关```````````````````````````````````````````````````````````*/
  "typescript.tsdk": "node_modules/typescript/lib",
  // 定义匿名函数的函数关键字后面的空格处理。
  "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
  // 定义函数参数括号前的空格处理方式。
  "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
  "vetur.validation.script": false,
  "editor.gotoLocation.multipleTypeDefinitions": "goto",
  "editor.gotoLocation.multipleReferences": "goto",
  "editor.gotoLocation.multipleImplementations": "goto",
  "editor.gotoLocation.multipleDefinitions": "goto",
  "editor.gotoLocation.multipleDeclarations": "goto",
  "explorer.compactFolders": false,
  "html.format.wrapLineLength": 0,
  "typescript.updateImportsOnFileMove.enabled": "never",
  "volar.codeLens.scriptSetupTools": true,
  "volar.codeLens.pugTools": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "git.confirmSync": false,
  "polacode.shadow": "none",
  "polacode.transparentBackground": true,
  "cSpell.userWords": [
    "maxlength"
  ],
}

// 全局安装 nrm
npm install -g nrm
// 查看源
nrm ls
// 切换源
nrm use taobao
// 添加源
nrm add ****