记录下本菜鸟作为一个初级前端，当拿到一个新电脑的时候

windows terminal

terminal 是我个人比较喜欢的命令行工具，默认可以启动 cmd ， powershell ， Azure Cloud Shell ， 还可以自己添加配置，比如 git-bash 。

并且界面比较美观，可以看一下比原生的 cmd 或者 powershell 好看多了。

系统商店搜索 terminal 进行安装

powershell 直接运行脚本会报错

先通过管理员身份启动 powershell 然后执行 set-ExecutionPolicy RemoteSigned 来让 powershell 支持运行脚本。

Watt Toolkit

系统商店搜索 Watt Toolkit ，下载安装，勾选 github 然后点击加速就行了，这样就可以快速合法的访问 github 了。

谷歌浏览器

新电脑自带一个 edge ，虽说也是和谷歌一样的内核，但我更习惯用谷歌

安装后进行下列操作

设置浏览器显示最小字体，防止开发移动端时小字体显示出问题

把浏览器首页设置为 👉👉 流莺起始页

VisBug

Vue.js devtools

Code Cola

万能复制 ( Enable Copy )

草料二维码

插件数不胜数,喜欢啥安装啥...

系统输入法不喜欢，安装个自己喜欢的，再换个皮肤，美滋滋。

vscode

👉👉 【图文并茂】六十多个 vscode 插件，助你打造最强编辑器

设置代码片段

"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"

设置配置文件

👉👉 vscode默认设置

//! `````````````````````````````````````````````````````````编辑器外观设置``````````````````````````````````````````````````````` // 编辑器文件图标主题 "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" : [ // 保存自动修复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"

git/svn

git 必装， svn 取决于公司用不用。

包管理工具

不用全装，需要哪个装哪个

... ...

nodejs

nvm 版本管理，没装上，不装了😡😠😡

nrm 源管理工具

// 全局安装 nrm
npm install -g nrm
// 查看源
nrm ls
// 切换源
nrm use taobao
// 添加源
nrm add ****
vue-cli
开发 vue 使用，公司的老工程还是需要的。
tree-cli
比系统自带的更好的生成目录树工具。
node-mon
开发 nodejs 项目必备，热启动。
Photoshop(切图仔必须)
pxcook(增强ps)
Fiddler EveryWhere(手机调试,选装)
Sourcetree/github desktop(代码管理)
switchHost(Host管理)
uTools(快捷工具)
Foxmail(邮箱管理)
xmind(思维导图)
wolai(笔记,中文低配版的nation)
微信/企业微信(摸鱼/工作)
ScreenToGif(录屏转gif)
闪电Gif制作软件
snipaste(截图软件)
酷狗/网易云/listen1 (摸鱼听歌)
apifox/postman (接口调试工具)
wps office(办公)
百度网盘/阿里网盘
Navicat(数据库)
sunlogin(远程操作)
nginx(前端)
mongodb compass(mongodb数据库专用)
Windows Terminal(增强版命令行工具)
Everything(文件查找)
WizTree(磁盘分析)
xyplorer(文件管理)