当前位置： 首页 > news >正文

开发环境/开发工具

news 2026/7/15 14:05:29

VSCode

操作栏

顶栏-配置运行模式

  • 常用一：浏览器运行
  • 常用二：nodejs运行

顶栏-运行

  • 调试模式运行
  • 非调试模式运行

侧栏

在文件夹中查找

底栏

设置setting

总体结构

设置命令行光标

收起所有文件

代码片段

React

{ "React Function Component": { "prefix": "react", "body": [ "import React from 'react';", "", "export default function() {", " return (", " <div>", " $0", " </div>", " );", "}", "", ], "description": "React Function Component" } }

Vue

{ "Vue Base Component": { "prefix": "vue", "body": [ "<template>\n", "</template>", "", "<script setup lang='ts'>\n", "</script>", "", "<style scoped lang='scss'>\n", "</style>" ], "description": "Vue Base Component" } }

插件

  • Chinese (Simplified)：简体中文插件
  • Live Server：开启服务器代理HTML文件
  • Markdown Preview Enhanced：markdown编辑器

Volar

TS和JS版本

  • TypeScript Vue Plugin (Volar)

  • Vue Language Features (Volar)

  • 使用JS编写Vue时，要及时关闭TS版本的Volar并重新加载

配置文件一jsconfig.json

{ "compilerOptions": { "target": "esnext", "useDefineForClassFields": true, "module": "esnext", "moduleResolution": "node", "strict": true, "jsx": "preserve", "sourceMap": true, "resolveJsonModule": true, "isolatedModules": true, "esModuleInterop": true, "lib": ["esnext", "dom"], "skipLibCheck": true, "baseUrl": ".", "paths": { "@/*": ["src/*"] } }, "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.vue"], "references": [{ "path": "./tsconfig.node.json" }] }

配置文件二tsconfig.json

{ "compilerOptions":{ //ES版本：ES5,ES2015(ES6),...,ES2021,...,ESNext(最新版本的术语) "target": "ESNext", //ES6之前的非标准模块化方案：CommonJS、AMD、UMD //ES6推出：import模块化规范 //ES9推出：动态import "module": "ESNext", "moduleResolution": "Node", //模块查找策略 "allowSyntheticDefaultImports": true , //支持import的默认导入导出 "lib": ["ES2020","dom","dom.iterable"], //ts文件中支持的库 //baseUrl是，paths[别名]的前缀 "baseUrl": "./", "paths": { "@/*": ["src/*"] }, "outDir": 路径, //编译文件输出目录 "removeComments": true, //移除注释 "sourceMap": true, //生成sourceMap文件 "noImplicitAny": true, //不允许隐式声明变量 "preserveConstEnums": true, //枚举常量依旧以常量的形式存在 "composite": true //用了可以优化性能 } "include": [路径1,路径2...], //编译的哪些ts文件 "references": [] //引入其他tsconfig.json文件 } src/**/*：/*表示任意文件；/**表示任意目录

vite-env.d.ts

//处理typescript编译器无法识别.vue文件的问题 declare module "*.vue" { import { DefineComponent } from "vue" const component: DefineComponent<{}, {}, any> export default component }

gitlen

每行代码的具体作者和修改时间

分支对比

快捷键

  • Ctrl+P：显示所有编辑器
  • Ctrl + Shift + P：显示所有命令、同时可以根据文件名搜索文件
  • tab作用1：向前移动一个制表符
  • tab作用2：代码片段自动补全时，移动到下一个自主定义处
  • shift tab：向后移动一个制表符

命令行

powershell禁止运行脚本：使用Set-ExecutionPolicy RemoteSigned或者Set-ExecutionPolicy Unrestricted

浏览器

运行JS代码

页面的JS代码组成

源代码的片段、内容脚本

页面HTML中的脚本

控制台的代码

三种JS代码作用域

范围相同

日志打印位置

控制台

控制台JS代码

多条语句用";"分隔

会打印最后一个表达式的值

源代码的片段会打印最后一个表达式的值

源代码

  • 页面：当前页面的代码，能打断点进行调试
  • 片段：自主编写JS脚本，能操作当前页面的DOM元素
  • 内容脚本：插件脚本，能操作所有页面的DOM元素

元素

  • 选择DOM元素
  • 修改CSS样式
  • 使用浏览器取色器
  • 移动模式和PC模式互换

控制台

  • 查看各种级别的打印输出

应用程序

  • 查看LocalStorage仓库、SessionStorage仓库、Cookie仓库、IndexedDB非关系数据库

网络

浏览器自带的抓包工具

  • 查看网络请求的请求头，请求体，响应头，响应体

录制

  • 录制内容1：鼠标事件、键盘事件、触屏板事件
  • 录制内容2：路由跳转的录制
  • 录制本质：通过js脚本实现操作复现

快捷键

  1. ctrl+f：关键字搜索
  2. ctrl+h：历史记录页
  3. ctrl+j：下载内容页
  4. ctrl+shift+s：截图
  5. ctrl+shift+b：显示或隐藏书签页
  6. F12：开发者工具
  7. F11：开启或关闭全屏模式
  8. F5：页面刷新
  9. 有链接的文字：可以通过右键复制其链接

设置开发者工具位置

  • 把控制台放到下左右，或者单独开一个窗口

常用插件

  • WebTab-AI新标签页
  • Vue.js devtools
  • React Developer Tools
  • PostWoman Http接口调试插件
  • FeHelper(前端助手)

VS Installer

安装VS Community

采用默认安装位置

  • VS Installer：C:\Program Files (x86)\Microsoft Visual Studio\Installer

vs编辑器按 0/ins 键切换光标形状

VMware workstation 16

安装VMware

问题一

  1. 安装时不输入密匙
  2. 接下来的操作会遇到下面情况

解决方案

  • 将VMware workstation卸载，重新安装时输入密匙
  • 密匙有：可以自己查阅

虚拟机属性

配置虚拟网络

所需镜像下载

  • windows镜像：前往windows官网
  • centos镜像：前往centos官网
  • ubuntu镜像：前往ubuntu官网

DBeaver

运行SQL脚本

问题一

public key retrieval is not allowed

snipaste

  • F1截图
  • 截图完成后，可以贴图、保存、标注
  • 鼠标滚动可以放大或缩小贴图
  • Ctrl+鼠标滚动可以增减贴图的透明度

Android Studio

安装位置

默认位置：C:\Program Files\Android\Android Studio

android sdk

默认位置：C:\Users\Administrator\AppData\Local\Android\Sdk

gradle user home位置

位置：C:\Users\Administrator\.gradle

作用1：存储gradle wrapper安装的各版本gradle

环境变量

  • ANDROID_HOME=C:\Users\Administrator\AppData\Local\Android\Sdk
  • JAVA_HOME=C:\Program Files\Android\Android Studio\jbr
  • Path=%ANDROID_HOME%\tools
  • Path=%ANDROID_HOME%\platform-tools
  • Path=%JAVA_HOME%\bin
  • Path=%GRADLE_HOME%\bin

安装模拟器

打包App

模拟器网络

  • 10.0.2.2是网关IP，同样也是本地计算机在模拟器网络中的IP
  • 模拟器的DNS要与本地计算机连接wift的DNS保持一致，才能正常进行域名解析

调试app上的WebView

nvm&npm&node

联系

  • nvm管理多个nodejs
  • 一个node版本对应一个npm
  • C:\Users\Administrator\.npmrc是npm的全局配置文件
  • .\npmrc中可以配置全局安装库目录、第三方库镜像

nvm的功能

  • 下载指定版本的nodejs
  • 切换nodejs版本

配置nvm

  • 配置环境变量NVM_HOME为D:\proSofts\nvm
  • 配置环境变量Path为D:\proSofts\nvm，nvm指令在D:\proSofts\nvm目录下
  • 配置环境变量NVM_SYMLINK为D:\proSofts\nvm\nodejs，NVM_SYMLINK是当前版本nodejs的软链接
  • 配置环境变量Path为D:\proSofts\nvm\nodejs，node指令在软链接D:\proSofts\nvm\nodejs下
  • nvm指令会读取配置文件%NVM_HOME%\setting.txt的root，把nodejs安装到root目录下，由于win10实现nodejs切换需要用到root\elevate.cmd，并且elevate.cmd默认在%NVM_HOME%目录下，所以root的值通常等于%NVM_HOME%

nvm配置文件

root: D:\proSofts\nvm
arch: 64
node_mirror: http://npmmirror.com/mirrors/node/

nvm的使用

  • nvm list available&&win10 ：能下载的远程nodejs版本
  • nvm ls-remote&&Ubuntu：能下载的远程nodejs版本
  • nvm list：已下载的node版本
  • nvm current：当前node版本
  • nvm use 版本号：切换到指定版本
  • nvm install 版本号：下载指定版本
  • nvm uninstall 版本号：卸载指定版本

npm全局配置文件

prefix=D:\proSofts\nvm\npm_global npm全局安装目录

cache=D:\proSofts\nvm\npm_cache npm缓存目录
registry=http://registry.npmmirror.com/ npm镜像(优先级高)

python=D:\proSofts\python\3

  • 查看npm全局配置文件：npm confg ls
  • 查看npm全局安装目录：npm config get prefix
  • 设置npm全局安装目录：npm config set prefix 目录地址
  • 查看npm镜像：npm config get registry
  • 设置npm镜像：npm config set registry 镜像地址

npm的使用

  • package.json：配置文件
  • npm init -y：初始化项目，生成配置文件
  • npm ls：当前目录的第三方库
  • npm ls -g：全局安装的第三方库
  • npm search <包名>：搜索远程包
  • npm view <包名> versions：搜索远程包的所有版本
  • npm i <包名>@<版本号>：下载指定版本号第三方库到当前目录：
  • npm i <包名> -g：下载第三方库到全局目录
  • npm i <包名> --force：强制安装
  • npm i <包名> --legacy-peer-deps：支持安装同一库的多个版本
  • npm login --registry= xxx：登录远程npm库
  • npm publish：把当前库发包到远程库
  • package.json中的包名、主文件夹的名称，尽量不要用中文
  • node12.0之前的加密库是OpenSSL，node12.0之后的加密库是BoringSSL

清理缓存

  1. npm cache clean --force || 删除D:\proSofts\nvm\npm_cache
  2. 删除package-lock.json

npx的使用

  • npx 命令t 参数<==>命令t 参数
  • npx 在当前目录的node_module中，寻找命令t
  • 找到命令t，使用命令t
  • 没找到命令t，下载并使用命令t；命令t使用完成，删除命令t

其他Cli指令

pnpm

pnpm create vite：搭建vue、react、electron脚手架

pnpm初始化和运行的项目，一旦移动位置，就很容易报错

配置文件：package.json

cnpm

yarn

包管理工具指令

配置文件：package.json

webpack

vite

打包工具指令

配置文件：webpack.config.js

配置文件：vite.config.js

nodemon

nodemon xxx.js

配置文件：nodemon.json

ts-node

ts-node xxx.ts

默认支持CommonJS模块化

typescript

tsc --init：初始化项目，生成配置文件

配置文件：tsconfig.json

package.json

  • name：项目名称
  • version：项目版本号
  • description：项目描述
  • author：项目作者
  • main：入口文件路径；默认是index.js
  • type：模块化方案；默认是CommonJS
  • scripts：脚本命令
  • devpendencies：生成环境依赖
  • devDependecies：开发环境依赖

package-lock.json

  • 锁定依赖版本：package-lock.json 文件会精确地记录项目依赖模块的版本，以确保在不同的开发环境中安装相同的模块版本，从而避免不同环境下可能出现的版本差异导致的问题。
  • 加快安装速度：npm 在通过 package-lock.json 安装依赖时，会利用缓存机制，从本地缓存中快速安装相应的模块，从而提高安装速度。
  • 提供依赖完整性保证：package-lock.json 文件会记录每个模块的完整依赖关系树，保证每个模块的依赖都可以被满足并安装成功。

nrm

全称npm registry manager，用于npm镜像源间的切换。

Maven

概述

安装maven

手动安装到自定义位置(推荐)

maven wrapper强制下载到C盘固定位置

配置环境变量

M2_HOME：D:\proSofts\maven

path：%M2_HOME%\bin

查找依赖的顺序

%M2_HOME%/conf/setting.xml指定的本地maven仓库

%M2_HOME%/conf/setting.xml指定的远程镜像仓库

远程maven中心仓库

从远程库下载的依赖，会存放到本地maven仓库

项目结构

target

classes
src
main
java
resources
test
java
pom.xml

功能

安装第三方依赖

编译Java项目文件

运行Java项目

全局配置文件

%M2_HOME%\conf\settings.xml <?xml version="1.0" encoding="UTF-8"?> <settings xmlns="http://maven.apache.org/SETTINGS/1.2.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.2.0 https://maven.apache.org/xsd/settings-1.2.0.xsd"> //设置localRepository本地仓库 <localRepository>D:/proSofts/maven/repository</localRepository> //设置镜像地址 <mirrors> <mirror> <id>aliyun-maven-public</id> <url>https://maven.aliyun.com/repository/public</url> <mirrorOf>central</mirrorOf> </mirror> <mirror> <id>aliyun-maven-center</id> <url>https://maven.aliyun.com/repository/central</url> <mirrorOf>central</mirrorOf> </mirror> </mirrors> ........... </settings>

mvn的使用

  • mvn clean：删除target文件夹
  • mvn compile：编译src/main中的Java类，并把class字节码放到target中
  • mvn dependency:resolve：下载pom文件中的第三方依赖
  • mvn exec:java：运行pom文件指定的入口类
  • mvn test：运行src/test/java中的所有测试文件
  • mvn test -Dtest=类A#方法A：运行src/test/java中类A的方法A

pom.xml文件

<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd" > <modelVersion>4.0.0</modelVersion> <groupId>com.example</groupId> <artifactId>my-project</artifactId> <version>1.0.0</version> <dependencies> .... </dependencies> <build> <plugins> <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>exec-maven-plugin</artifactId> <version>1.6.0</version> <configuration> <mainClass>运行的主类</mainClass> </configuration> </plugin> </plugins> </build> </project>

Python

windows

  • 采用驱动程序安装
  • pythonPath通常有：当前目录、系统变量PYTHONPATH、sys.path
  • sys.path通常有：%pythonHome%、%pythonHome%/Lib、%pythonHome%/Lib/site-packages
  • pip下载路径：%pythonHome%/Lib/site-packages
  • 移动或修改%pythonHome%文件夹，很可能导致pip.exe找不到python.exe

Ubuntu

  • apt install python2
  • apt install python3

EXCEL

多列复制到一列

合并至一行：方式一，TEXTJOIN(分隔符,是否避免多余空行,单元格A:单元格B)。方式二，单元格A&单元格B&单元格C

去公式：复制后，右键选择“值粘贴”

单元格内部换行：点击开始页签中的自动换行

http://www.cnnetsun.cn/news/3401081.html

相关文章：

  • Windows 11终极清理指南：开源神器Win11Debloat让你的电脑快如闪电
  • 前端转AI_Agent全栈工程师：到底要学什么？
  • 紧急！ChatGPT项目结项前72小时必须完成的3项合规动作（GDPR/《生成式AI服务管理暂行办法》双轨校验清单）
  • Cursor AI多屏协同布局切换失效？企业级部署中97.6%团队漏配的workspace-scoped schema校验机制
  • LVGL笔记(6)-电子相册使用手势切换图片(windows仿真)
  • 签约“百城千园行”，格创东智加速打造绿色低碳智慧园区
  • Windows 11界面改造利器：ExplorerPatcher让经典操作体验回归
  • 如何永久保存微信聊天记录：从数字碎片到个人记忆库的完整指南
  • BP神经网络预测matlab代码讲解与实现步骤
  • 炉石传说脚本：7倍效率提升的智能游戏助手终极指南
  • 终极解决方案：3分钟搞定Windows防休眠烦恼
  • 抖音直播弹幕实时抓取：5分钟掌握DouyinBarrageGrab完整使用指南
  • 树莓派5+Hailo AI Hat部署自定义YOLO模型实战
  • FPD-Link III解串器DS90UB940N-Q1：汽车高速视频传输与MIPI CSI-2接口实战
  • 时间敏感网络TSN—帧抢占技术的实现原理与帧格式解析
  • 重新定义3D打印体验：深度解析Cura版本升级的技术演进之路
  • 硬件电路设计--运算放大器（三）应用二：从基础单元到信号调理实战
  • NiceFish数据可视化：ECharts图表组件在Angular项目中的集成指南
  • 从Protel到Altium Designer：EDA工具演变与升级指南
  • 终极指南：如何用Citra模拟器在电脑上流畅运行3DS游戏
  • Cura配置文件迁移与版本升级完整教程：解决3D打印切片软件配置兼容性问题
  • 终极指南：Citra模拟器快速上手与性能优化完全手册
  • 从入门到精通：实战使用memtest_vulkan高效检测GPU显存稳定性
  • 3步构建您的个性化桌面伙伴：开源虚拟伴侣完全指南
  • STM32晶振电路设计：从增益裕量计算到PCB布局实战
  • 2.5平方电线选购指南：软线与硬线对比及诺娜品牌实测
  • ArcGIS面要素最小边界几何：从凸包到包络矩形的参数详解与应用场景
  • MT48LC16M16A2P-6A IT:G参数规格：256Mb/166MHz/工业级/TSOP-54 Micron SDRAM详细参数
  • 哔咔漫画下载器终极指南：三分钟打造你的个人永久漫画库
  • Windows Home Server 2011安装配置全攻略：家庭服务器搭建指南