最近从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
压缩工具
Git
git官网,傻瓜式安装
检测安装是否成功
git --version
Docker
docker version
浏览器
Chrome每个前端仔必备浏览器,官网下载。
别忘了登陆谷歌账号同步配置哦~
分享一下我的谷歌扩展
截图工具
我常用的就是Snipaste啦,功能强大
测试工具
postman,用来测试调用的接口
笔记工具
notion亲测好用,不过国外软件容易被墙
国内同等替换软件 wolai mark一下
本地markdown编辑器 Typora
怎么能少得了思维导图呢 Xmind