设置注释样式

字体样式可以设置以下几种

  • bold 加粗
  • italic 斜体
  • underline 下划线
  1. "editor.tokenColorCustomizations": {
  2.   "comments": {
  3.     // 设置字体样式 加粗 下划线 斜体等
  4.     "fontStyle": "",
  5.     // 设置字体颜色
  6.     "foreground": "#4caee2"
  7.   }, // 注释
  8.   // "keywords": "#0a0", // 关键字
  9.   // "variables": "#f00", // 变量名
  10.   // "strings": "#e2d75dbd", // 字符串
  11.   // "functions": "#5b99fcc9", // 函数名
  12.   // "numbers": "#AE81FF" // 数字
  13.     },

自定义代码片段

  1. {
  2.     // js 常用代码片段
  3.     "sj": {
  4.         "prefix": "/sjs",
  5.         "body": ["const num = Math.ceil(Math.random() * 999);"],
  6.         "description": "随机数"
  7.     },
  8.     "df": {
  9.         "prefix": "/df",
  10.         "body": ["() => {}"],
  11.         "description": "箭头函数"
  12.     },
  13.     "mockArr": {
  14.         "prefix": "/mockArr",
  15.         "body": [
  16.             "const arr = new Array(10).fill(1).map((v, i) => {",
  17.             "   return {",
  18.             "      key: i,",
  19.             "      value: v",
  20.             "    };",
  21.             "});"
  22.         ],
  23.         "description": "快速mock数组数据"
  24.     },
  25.     // react 模板
  26.     "myfcc": {
  27.         "prefix": "/myfcc",
  28.         "body": [
  29.             "import React from 'react';",
  30.             "import {observer} from 'mobx-react';",
  31.             "import style from './style.less';",
  32.             "",
  33.             "function DemoPage(props) {",
  34.             "    return <div className={style.DemoPage}></div>;",
  35.             "}",
  36.             "",
  37.             "export default observer(DemoPage);",
  38.             ""
  39.         ],
  40.         "description": "函数组件模板"
  41.     },
  43.     // react hook 相关
  44.     "useEffect": {
  45.         "prefix": "/uff",
  46.         "body": ["useEffect(() => {}, [])"],
  47.         "description": "useEffect"
  48.     },
  49.     "useState": {
  50.         "prefix": "/uss",
  51.         "body": ["const [value, setValue] = useState(null);"],
  52.         "description": "useState"
  53.     },
  54.     // lodash 相关
  55.     "Lodash_map": {
  56.         "prefix": ["/map", "_map"],
  57.         "body": ["_.map([], () => {});"],
  58.         "description": "Lodash_map"
  59.     },
  60.     "Lodash_forEach": {
  61.         "prefix": ["/forEach", "_forEach"],
  62.         "body": ["_.forEach([], () => {});"],
  63.         "description": "Lodash_forEach"
  64.     },
  65.     "Lodash_includes": {
  66.         "prefix": ["/includes", "_includes"],
  67.         "body": ["const result = _.includes([], 1);"],
  68.         "description": "数组是不是包含某个值"
  69.     },
  70.     "Lodash_isEqual": {
  71.         "prefix": ["/isEqual", "_isEqual"],
  72.         "body": ["_.isEqual({}, {});"],
  73.         "description": "两个值是否相等"
  74.     },
  75.     "Lodash_isArray": {
  76.         "prefix": ["/isArray", "_isArray"],
  77.         "body": ["_.isArray([]);"],
  78.         "description": "是不是数组"
  79.     },
  80.     "Lodash_isEmpty": {
  81.         "prefix": ["/isEmpty", "_isEmpty"],
  82.         "body": ["_.isEmpty({});"],
  83.         "description": " 是不是空对象"
  84.     },
  85.     "Lodash_isInteger": {
  86.         "prefix": ["/isInteger", "_isInteger", "/int"],
  87.         "body": ["_.isInteger(0);"],
  88.         "description": " 是不是整数"
  89.     },
  90.     "Lodash_isNaN": {
  91.         "prefix": ["/isNaN", "_isNaN"],
  92.         "body": ["_.isNaN(NAN);"],
  93.         "description": "是不是非数字"
  94.     },
  95.     "Lodash_isNumber": {
  96.         "prefix": ["/isNumber", "_isNumber"],
  97.         "body": ["_.isNumber(0);"],
  98.         "description": "是不是数字"
  99.     },
  100.     "Lodash_isString": {
  101.         "prefix": ["/isString", "_isString"],
  102.         "body": ["_.isString('');"],
  103.         "description": "是不是字符串"
  104.     },
  105.     "compact": {
  106.         "prefix": ["/compact", "_compact"],
  107.         "body": ["_.compact([]);"],
  108.         "description": "创建一个新数组,包含原数组中所有的非假值元素。例如false, null,0, 空字符串 undefined, 和 NaN 都是被认为是“假值”。"
  109.     }
  110. }

自定义代码块折叠

  1. // #region MyClass definition
  2.  MyClass1 = ()=>{}
  3.  MyClass2 = ()=>{}
  4.  MyClass3 = ()=>{}
  5. // #endregion

插件推荐

开发规范

Document this

image.png

选中方法 按两次快捷键 ctrl+alt+D

image.png

开发效率

Turbo Console Log

image.png

添加日志 ctrl + alt + L 删除所有日志 alt + shift + d