zl程序教程

您现在的位置是:首页 >  其他

当前栏目

【开发工具】前端开发者更换新电脑,需要做哪些准备?

电脑 哪些 需要 准备 更换 开发工具 前端开发
2023-06-13 09:18:28 时间

最近从Windows换到MacOS系统,借此记录一下作为前端入手新的系统需要做哪些准备:

VScode

工欲善其事,必先利其器。 所以首要步骤就是把我们的开发工具下载好。官网直达 然后通过github登陆同步我们之前的配置和插件啦。 这里我分享一下我的常用配置:

{
  "editor.fontSize": 18,
  "vsicons.dontShowNewVersionMessage": true,
  "editor.insertSpaces": true,
  "editor.lineNumbers": "on", //开启行数提示
  "editor.quickSuggestions": {
    //开启自动显示建议
    "other": true,
    "comments": true,
    "strings": true
  },
  // editformatOnsave: true,
  "editor.tabSize": 2, //制表符符号eslint
  "workbench.editor.untitled.hint": "hidden",
  "workbench.startupEditor": "newUntitledFile",
  "workbench.iconTheme": "vscode-icons",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // "editor.formatOnSave": true,
  "explorer.compactFolders": false,
  "workbench.editorAssociations": {
    "*.html": "default"
  },
  "javascript.updateImportsOnFileMove.enabled": "prompt",
  "github.copilot.enable": {
    "*": true,
    "yaml": false,
    "plaintext": false,
    "markdown": false,
    "vue": false,
    "javascript": false,
    "typescript": false,
    "html": true
  },
  "editor.inlineSuggest.enabled": true,
  "editor.wordWrap": "on",
  "gitlens.hovers.currentLine.over": "line",

  "emmet.useInlineCompletions": true,
  // @src目录路径提示
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  },
  "terminal.integrated.fontFamily": "monospace",
  "editor.fontFamily": "'Fira Code', Consolas, '微软雅黑', monospace",
  "editor.mouseWheelZoom": true,

  // 解决vetur插件问题
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
    },
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": true
    },

    "prettier": {
      "trailingComma": "none", // 末尾禁止添加逗号,这个很重要。找了好久
      "semi": false, // 去掉代码结尾的分号
      "singleQuote": true // 使用单引号替代双引号
    }

  },
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },
  // 保存的时候用使用prettier进行格式化
  "editor.formatOnSave": true,
  // 默认使用prittier作为格式化工具
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // 不要有分号
  "prettier.semi": false,
  // 使用单引号
  "prettier.singleQuote": true,
  // 当按tab键的时候,会自动提示
  "emmet.triggerExpansionOnTab": true,
  // jsx的提示
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "workbench.colorTheme": "Dracula",
  "cssrem.vw": true,
  "cssrem.vwDesign": 1920,

  // fileHeader注释

  "fileheader.customMade": {
    // 文件头部注释
    "Author": "Tricia", // 开发者名字
    "Date": "Do not edit",

    "Description": "" //文件说明描述
    //"FilePath": "Do not edit" // 增加此项配置即可
  },
  "fileheader.cursorMode": {
    // 函数头部注释
    "description": "", //函数功能描述
    "param": "params", //函数对应参数
    "Date": "Do not edit"
  },

  "fileheader.configObj": {
    "createFileTime": true,
    "language": {
      "languagetest": {
        "head": "/$$",
        "middle": " $ @",
        "end": " $/",
        "functionSymbol": {
          "head": "/** ",
          "middle": " * @",
          "end": " */"
        },
        "functionParams": "js"
      }
    },
    "autoAdd": true,
    "autoAddLine": 100,
    "autoAlready": true,
    "annotationStr": {
      "head": "/*",
      "middle": " * @",
      "end": " */",
      "use": false
    },
    "headInsertLine": {
      "php": 2,
      "sh": 2
    },
    "beforeAnnotation": {
      "文件后缀": "该文件后缀的头部注释之前添加某些内容"
    },
    "afterAnnotation": {
      "文件后缀": "该文件后缀的头部注释之后添加某些内容"
    },
    "specialOptions": {
      "特殊字段": "自定义比如LastEditTime/LastEditors"
    },
    "switch": {
      "newlineAddAnnotation": true
    },
    "supportAutoLanguage": [],
    "prohibitAutoAdd": ["json"],
    "folderBlacklist": ["node_modules", "文件夹禁止自动添加头部注释"],
    "prohibitItemAutoAdd": [
      "项目的全称, 整个项目禁止自动添加头部注释, 可以使用快捷键添加"
    ],
    "moveCursor": true,
    "dateFormat": "YYYY-MM-DD HH:mm:ss",
    "atSymbol": ["@", "@"],
    "atSymbolObj": {
      "文件后缀": ["头部注释@符号", "函数注释@符号"]
    },
    "colon": [": ", ": "],
    "colonObj": {
      "文件后缀": ["头部注释冒号", "函数注释冒号"]
    },
    "filePathColon": "路径分隔符替换",
    "showErrorMessage": false,
    "writeLog": false,
    "wideSame": false,
    "wideNum": 13,
    "functionWideNum": 0,
    "CheckFileChange": false,
    "createHeader": false,
    "useWorker": false,
    "designAddHead": false,
    "headDesignName": "random",
    "headDesign": false,
    "cursorModeInternalAll": {},
    "openFunctionParamsCheck": true,
    "functionParamsShape": ["{", "}"],
    "functionBlankSpaceAll": {},
    "functionTypeSymbol": "*",
    "typeParamOrder": "type param",
    "customHasHeadEnd": {},
    "throttleTime": 60000,
    "functionParamAddStr": "",
    "NoMatchParams": "no show param"
  },
  "liveServer.settings.donotShowInfoMsg": true,
  "git.enableSmartCommit": true,
  "git.confirmSync": false
}

nodejs

前端开发环境也是必须要准备好的~ 官网直达 傻瓜式安装,检测自己有没有安装成功

node -v
npm -v

压缩工具

bandizip

Git

git官网,傻瓜式安装 检测安装是否成功

git --version

Docker

官网下载地址

docker version

浏览器

Chrome每个前端仔必备浏览器,官网下载。 别忘了登陆谷歌账号同步配置哦~ 分享一下我的谷歌扩展

截图工具

我常用的就是Snipaste啦,功能强大

测试工具

postman,用来测试调用的接口

笔记工具

notion亲测好用,不过国外软件容易被墙 国内同等替换软件 wolai mark一下 本地markdown编辑器 Typora 怎么能少得了思维导图呢 Xmind