ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

前端环境安装【mac/window,nvm/node,npm/yarn,react/vue/ts,git,ai IDE(vs,沙箱/测试,package与package-lock/yarn.lock】

前端环境安装【mac/window,nvm/node,npm/yarn,react/vue/ts,git,ai IDE(vs,沙箱/测试,package与package-lock/yarn.lock】 目录mac护眼模式README.md了解当前项目IDEAI IDE免费*程序员角色的演变*核心竞争力 AI 协作能力 架构思维 业务理解Trae - AI 原生 IDECursor - The AI Code Editor仪表盘/数据分析使用指南✅ 模型简单任务token花费最少Composer 2.5 (Standard / 非 Fast 模式)默认auto cost 即可复杂用 Claude 4.5 Sonnet不行的话就用 Claude 4.5 Sonnet thinking 准确度会显著提升耗费额度是 普通的3倍✅ 一个任务一个会话✅ 上下文管理开局提供核心上下文后续用 引用 增量提供。快捷键Tab 预测下一步cmd I 右侧aiCmd k小框ai切换账号会话不会丢失过期与否 看光标处是否有提示Restore checkpoint通用IDEVSCodeTSJS超集git代码版本管理node版本管理器二选一nvm全面还可管理全局 npm 包安装windowmac常见命令n模块轻量级Node基于 Chrome V8 引擎的 JS 运行环境最接近且当前项目的版本npm管理JS包、npm包包括框架react、vue、语言ts更换npm源为淘宝镜像yarnnpm优化版更换yarn源为淘宝镜像常见报错安装包1.查看是否有package.jsonA.初始化项目: 若无 package.json 将创建新项目并生成 package.jsonB.安装依赖: 若有 package.json 文件读取并安装项目所需的所有依赖项2.按照package.json一键安装包安装具体版本的包安装包失败原因一般node、npm版本与原项目相差不大没问题可能是镜像源不够新导致包不一样依赖冲突清空未安装成功的缓存有时yarn不成功可以用npm安装删除node_modules安装的依赖包lock文件最后方案拷贝覆盖mac可能遇到无法跳过的安全验证问题3.启动npm start通用其他yarn serve 、 npm run dev yarn devpackage.json-scirpts-serve查看启动命令4.更新依赖(native模块重新编译了, 就要更新依赖)前端框架npm包Reacta.全局方式b.临时方式运行Vue插件vetur、Vue-Official识别vue语法不再报红mac护眼模式上角苹果图标→“系统偏好设置”→“显示器”1/ 关闭「原彩显示」设置路径系统设置-显示器-关闭「原彩显示」作用原理避免屏幕色温自动调节造成的视觉适应负担2/ 开启「夜览模式」建议设置色温调至中间偏右约5500K注意事项白天使用时可将强度调低至30%手动开启勾选“明天前保持开启”屏幕会立即变暖色。定时开启选择“日落到日出”自动根据定位调整或“自定”手动设置时间段。色温调节拖动滑块调整暖色程度越往右越暖蓝光越少3/ 使用P3色域推荐设置显示器颜色描述文件调为「P3色域」README.md了解当前项目IDEIntegrated Development Environment集成开发环境核心功能代码编辑、编译/解释器、调试、项目管理、扩展支持类型代表工具适用语言/场景通用型IDEVisual Studio Code全语言支持需插件语言专用IDEPyCharmPython深度语言优化如Django框架集成移动开发IDEAndroid Studio安卓APP开发AI增强IDECursor/Trae IDE内置AI代码生成和补全AI IDE免费综合实力vscodeMAI-Code-1.1-Flash看图编码 Trae WorkBuddy核心生产力写核心业务、调 UI 布局➡️ 留在VS Code用 MAI-Code 享受飞一样的出码速度和零额度焦虑。攻坚克难要开始写一个全新模块、或者大范围重构➡️ 打开Trae用它的 Agent 模式帮你自动去改多个文件、理清思路。混合办公要把数据库导成Excel、写技术文档、发周报邮件➡️ 挂着WorkBuddy让里面的专家团帮你跨软件搞定。*程序员角色的演变从“编写者”到“审核者”和“设计者”的转型核心能力要求变化算法设计、AI工具调优、业务抽象能力团队协作模式的调整如AI人工的代码评审流程*核心竞争力AI 协作能力 架构思维 业务理解Prompt工程是“怎么问”精确发问确保AI输出可用代码。架构思维是“问什么”决定哪些问题该交给AI解决哪些必须人工设计。AI IDE核心能力差别在于模型DeepSeek满血版包括更完整的功能和更少的服务器负载问题。模型/厂商核心优势技术短板典型应用场景GPT-4.5 (OpenAI)多模态融合文本/图像/音频/视频复杂逻辑推理能力全球领先中文理解偏差率12%API成本高科研分析、跨国企业协同、动态内容生成Claude 3.7 Sonnet (Anthropic)编程领域断层领先HumanEval评测91.2分10万token长文档解析视觉任务较弱商业化按需计费软件工程、法律文书分析、合规性文档Gemini 2.0 (Google)原生多模态百万级上下文窗口工业设计图纸生成中文优化不足生态开放性较低智能制造、教育课件生成、影视后期DeepSeek R1 (深度求索)国产开源标杆推理速度提升3倍128k中文长文本处理中文文化类问答错误率18%政务文档分析、金融研报生成、代码辅助MCP你用MCp Tool发送请求 →MCp Server按MCp 协议整理上下文 → 交给LLM处理 → 结果通过 Server 和 Tool 返回给你。MCp 是沟通的语言Server 是执行者Tool 是入口LLM 是大脑。用户 → MCp Tool“明天上海天气”历史对话↓MCp Server按 MCp 协议打包“用户昨天问过北京今天又问上海历史记录是XXX”↓LLM看到完整上下文→理解“上海天气”↓MCp Server接收回复→按协议解包↓用户 ← MCp Tool返回“上海明天多云26°C”Trae - AI 原生 IDE支持从VSCode/Cursor迁移配置设计稿转代码Trae 解决无法登录问题_trae国际版-CSDN博客对比维度Trae IDE独立应用Trae 插件MarsCode 衍生AI整合度深度整合支持全项目级AI决策依赖宿主IDE功能受限于插件架构trae国际版登录需要VPN模型回答插入等功能可能需要VPNvscode 语音模型无需VPNcursor 图片维度Trae IDECursor IDE开发公司字节跳动国内版/国际版Anysphere美国核心定位AI原生IDE专为中文开发者优化基于VS Code重构全球化多语言支持模型支持国内版Doubao-1.5-pro、DeepSeek R1/V3国际版Claude 3.5/3.7更擅长编程、GPT-4o免费GPT-4、Claude 3.5需订阅Pro版价格策略完全免费Pro版20美元/月企业版更高Cursor - The AI Code EditorCursor如何汉化简单_cursor设置中文-CSDN博客仪表盘/数据分析使用指南✅模型模型编程优势相对劣势适用场景Claude 3.7 Sonnet性价比之王。代码生成、理解和调试能力非常均衡速度极快是日常编程的“水桶机”。在极其复杂的、需要深度推理的架构设计上可能略逊于Claude 4.5。日常开发主力写函数、修Bug、代码审查、写脚本。GPT-4o代码补全和交互速度顶尖对上下文的理解非常敏锐尤其在快速迭代和修改代码时体验流畅。生成长篇、复杂的代码时逻辑严谨性可能稍弱。快速原型开发、与现有代码高频交互、需要快速补全和修改的场景。Gemini 2.5 Flash超大上下文窗口百万Token级能处理整个代码库的分析。在代码搜索、跨文件理解方面有优势。代码生成的“灵感”和创造力可能不如前两者。代码库级别的分析、重构、文档生成。问答式编程如“这个函数在哪被调用”。适用于上下文DeepSeek Coder专为编程训练在某些编程语言的基准测试上得分很高成本极低。通用知识和逻辑推理能力不如全能模型。预算极其有限时的专项代码生成任务。结论对于大多数日常编程任务Claude 3.7 Sonnet和GPT-4o是比Claude 4.5更具性价比和效率的选择。Claude 4.5 Think模式应保留给最复杂的算法设计或系统架构难题。简单任务token花费最少Composer 2.5 (Standard /非Fast模式)默认auto cost 即可将Autocost模式作为默认设置。Cursor的调度算法会根据复杂程度智能地为你的任务选择性价比最高的模型通常是Claude 3.7或GPT-4o这是避免额度过快消耗的最佳策略。复杂用Claude 4.5 Sonnet不行的话就用 Claude 4.5 Sonnetthinking 准确度会显著提升耗费额度是 普通的3倍deepseek的thinking 会消耗更多token用于展示但不会影响回答精度✅ 一个任务一个会话✅ 上下文管理开局提供核心上下文后续用引用增量提供。快捷键Tab 预测下一步cmd I 右侧aiCmd k小框ai切换账号会话不会丢失过期与否 看光标处是否有提示Restore checkpoint不是只删除ai修改的代码而是回到那个版本代码生成能力TraeBuilder模式自动生成完整项目框架适合快速原型开发。中文优化在中文API调用、注释生成等场景准确率高18.3%。Cursor多语言支持擅长TypeScript、Go等语言的强类型推导跨文件编辑能力更强。复杂任务如微服务架构设计编译通过率比Trae高9.7%。交互模式TraeChat模式支持中文自然语言交互一键修复Bug或生成注释。多模态上传设计图生成代码如“截图即开发”通用IDEVSCode官方直接下载(下载最新版或更新到最新版)VSCode插件Auto Dark Mode根据时间自动切换。优先选浅色主题的情况白天/光线充足环境需要精确辨识字体的工作如代码审查、文档编辑有散光或老花眼深色主题会加重视觉模糊2. 优先选深色主题的情况夜间/低光照环境OLED屏幕用户深色省电且减少烧屏风险短期聚焦特定元素如调试高亮语法要素深色主题浅色主题蓝光暴露减少屏幕整体蓝光发射量蓝光较多但可通过系统级护眼模式过滤瞳孔调节瞳孔放大可能增加眩光敏感度瞳孔自然收缩减少外部光线干扰文本对比度高对比度易引发视疲劳白字黑底低对比度更接近纸质阅读体验黑字白底环境光适应性适合暗环境夜间/低光照适合明亮环境白天/办公室TSJS超集作为npm包发布git代码版本管理git -version根据提示mac自带的安装即可不过不好卸载如果限制外网显示安装时长时长时短多试一下即可node版本管理器二选一n模块nvmNode Version Managernvm-windowsWindows平台上的Node Version Manager切换版本后要删除node_modules安装的依赖包lock文件nvm全面还可管理全局 npm 包nvm 主要是用来管理 nodejs 和 npm 版本的工具可以用来切换不同版本的 nodejs。安装nvm之前先卸载nodeMac彻底卸载nodesudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*}Windows系统完全卸载删除 Node.js_卸载nodejs命令-CSDN博客z安装windowmacsudo curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash若nvm -v不成功1、进入顶层文件夹cd ~2、配置环境变量vim ~/.bash_profile3、然后将下面的配置信息输入保存export NVM_DIR$HOME/.nvm[ -s $NVM_DIR/nvm.sh ] \. $NVM_DIR/nvm.sh # This loads nvm[ -s $NVM_DIR/bash_completion ] \. $NVM_DIR/bash_completion # This loads nvm bash_completionEsc键从插入模式切换到命令模式然后执行相应的命令。:wq 退出并保存:q! 退出不保存:e! 放弃未保存w表示写入writeq表示退出quit。组4、刷新环境变量source ~/.bash_profile5、输入 nvm -v 检查nvm是否可用6、如果不可以参照下面配置zsh1、进入顶层文件夹cd ~2、配置环境变量vim ~/.zshrc3、然后将下面的配置信息输入保存export NVM_DIR$HOME/.nvm[ -s $NVM_DIR/nvm.sh ] \. $NVM_DIR/nvm.sh # This loads nvm[ -s $NVM_DIR/bash_completion ] \. $NVM_DIR/bash_completion # This loads nvm bash_completion4、刷新环境变量source ~/.bash_profile常见命令nvm -v 查看当前版本nvm --confignvm list 查看已安装node版本列表nvm install version 下载对应node版本如nvm install 14.20.1nvm uninstall version 卸载nvm use version 切换node版本nvm on 开启nvmnvm off 关闭nvmnvm alias default 版本号 设置默认node版本window下安装nvmnode, npm, yarnn模块轻量级安装n工具使用Node.js自带的npm包管理器可以全局安装n工具。npm install -g n查看可用的Node.js版本运行以下命令以查看所有可用的Node.js版本。n ls安装特定版本的Node.js选择要安装的特定版本并运行以下命令n version例如要安装Node.js 14版本n 14切换到已安装的Node.js版本使用以下命令切换到先前安装的Node.js版本sudon选择版本这会显示一个交互式界面可以在其中选择要切换的版本。↑↓选择enter确定选择q退出卸载特定版本的Node.js如果要卸载某个版本可以运行以下命令其中version为版本号n rm versionNode基于 Chrome V8 引擎的 JS 运行环境最接近且当前项目的版本很多项目刚开始跑不起来是node版本问题mac 安装node.js_mac安装nodejs-CSDN博客npm管理JS包、npm包包括框架react、vue、语言tstips版本可以高于项目要求版本如6.0只要稳定版本就行(1618)别用最新版本就行# 依次执行以下命令nvm install node版本nvm ls 查看列表nvm use node版本node -vnpm -v更换npm源为淘宝镜像# 查询当前使用的镜像源npm get registry# 设置为淘宝镜像源npm config set registry https://registry.npmmirror.com/# 还原为官方镜像源npm config set registry https://registry.npmjs.org/yarnnpm优化版# 全局安装yarnnpm install -g yarn# 查看yarn 版本yarn -v更换yarn源为淘宝镜像​# 查询当前使用的镜像源yarn config get registry# 设置为淘宝镜像源yarn config set registry https://registry.npmmirror.com/# 还原为官方镜像源yarn config set registry https://registry.yarnpkg.com/常见报错安装包1.查看是否有package.jsonA.初始化项目: 若无package.json将创建新项目并生成package.json#初始化一个新的package.jsonyarn init#安装依赖yarnB.安装依赖: 若有package.json文件读取并安装项目所需的所有依赖项tipspackage.json依赖关系的配置文件没有lock文件时按照package.json安装package-lock.jsonnpm实际安装依赖版本的锁定文件以确保在不同环境中的一致性重新安装包时会遵循package-lock.jsonyarn.lockYarn在安装依赖时会创建或更新这个文件重新安装包时会遵循yarn.lock2.按照package.json一键安装包Yarn: yarn yarn install 的简写npm: npm install安装包生成的文件夹node_modules(本地各个分支共用node包)安装具体版本的包npm install 包版本号安装包失败原因一般node、npm版本与原项目相差不大没问题可能是镜像源不够新导致包不一样依赖冲突清空未安装成功的缓存有时yarn不成功可以用npm安装npm/yarn cache clean删除node_modules安装的依赖包lock文件如果安装错了可以删除重安rm -rf node_modulesrm -rf命令是递归地强制删除目录不会将文件移动到垃圾桶或回收站而是直接从文件系统中删除。最后方案拷贝覆盖mac可能遇到无法跳过的安全验证问题3.启动npm start通用其他yarn serve、npm run devyarn devpackage.json-scirpts-serve查看启动命令返回项目根目录4.更新依赖(native模块重新编译了, 就要更新依赖)yarnyarn add -D ./native/bridge_nodejsyarn dev前端框架npm包Reacta.全局方式安装 Create-React-App要安装 React 脚手架您需要使用 npm 包管理器安装 Create-React-App。请在终端中运行以下命令npm install -g create-react-app创建项目现在您已经安装了 React 脚手架您可以使用以下命令在 Mac 上创建新的 React 项目create-react-app my-app启动项目最后您可以在终端中运行以下命令启动您的 React 项目cd my-app npm startb.临时方式npx create-react-app your-app-namecreate-next-app版本14.0.4要求 Node.js 版本至少为18.17.0运行cd my-appnpm start这个过程为什么慢,因为这个过程实际会安装三个东西1.react:react的顶级库.2.react-dom:因为react有很多的运行环境,比如app端的react-native,我们要在web上运行就使用react-dom.3.react-scripts:包含运行和打包应用程序的所有脚本配置.Mac 搭建React脚手架环境create-react-app - 掘金Vue插件vetur、Vue-Official识别vue语法不再报红
返回列表