国外网站设计欣赏长沙网页设计哪家专业

一、安装编辑器

vscode

安装必备的vscode插件：

1. 必备插件
   • Chinese (Simplified) Language Pack for Visual Studio Code：汉化包
   • ESLint：代码检查工具，可以帮助开发者 检查语法错误和规范代码风格，并提供修复建议。它支持多种 JavaScript 规范，如 Airbnb、Google、Standard 等。在 VS Code 中使用 ESLint 插件 可以实现实时代码检查和错误提示，提高代码质量。
   • Prettier：代码格式化工具，用于自动格式化代码，可以统一代码风格。
   • Bracket Pair Colorizer：括号匹配插件，用于给括号添加颜色，方便查看代码结构。
   • Auto Rename Tag：HTML 标签重命名插件，用于自动重命名 HTML 标签，避免手动修改。
   • GitLens：Git 代码库插件，用于显示 Git 代码库的详细信息、代码中的Git历史和注释，方便版本控制。
   • Path Intellisense：文件路径自动补全插件，可以帮助开发者快速输入文件路径，提高开发效率。
   • Debugger for Chrome: 用于在Visual Studio Code中调试JavaScript代码。
   • 小程序开发助手：微信小程序代码提示工具。
2. Vue.js 插件
   • Vetur：是一个 Vue.js 开发插件，可以帮助开发者更好地编写 Vue 组件。它提供了 语法高亮、自动补全、错误检查、代码格式化 等功能，使开发者可以更快速地编写 Vue 代码。
   • Vue 3 Snippets：是一个 Vue.js 3 代码片段插件，可以帮助开发者更快速地编写 Vue 3 代码。它提供了 Vue 3 组件、指令、生命周期 等常用代码片段，使开发者可以更快速地编写 Vue 3 代码。
   • Vue Peek：是一个 Vue.js 开发插件，可以帮助开发者 更快速地查看 Vue 组件的定义。它可以在模板中快速跳转到组件定义，使开发者可以更快速地了解组件的结构和属性。
3. React 插件
   • ES7 React/Redux/GraphQL/React-Native snippets：是一个 React 开发插件，可以帮助开发者更快速地编写 React 代码。它提供了 React 组件、生命周期、状态管理 等 常用代码片段，使开发者可以更快速地编写 React 代码。
   • Reactjs code snippets：是一个 React 开发插件，可以帮助开发者更快速地编写 React 代码。它提供了 React 组件、生命周期、**状态管理**等常用代码片段，使开发者可以更快速地编写 React 代码。
   • React-Native/React/Redux snippets for es6/es7：是一个 React Native 开发插件，可以帮助开发者更快速地编写 React Native 代码。它提供了 React Native 组件、生命周期、状态管理等常用代码片段，使开发者可以更快速地编写 React Native 代码。

二、安装浏览器

Google Chrome

安装浏览器插件：

• Vue.js devtools：vue 开发调试工具
• React Developer Tools：react 开发调试工具
• Redux DevTools：redux 开发调试工具
• JSON-handle：快捷预览 json 接口工具
• Octotree - GitHub code tree：目录形式预览github仓库工具

三、安装Git版本控制工具

• 下载完成后，双击安装包并按照指引完成安装。

• 打开命令行工具，运行 git --version 查看 Git 的版本号，确保安装成功并显示相应的版本号。

• 在使用 Git 之前，还需要进行一些基本的配置，如设置用户名和邮箱地址。可以使用以下命令进行配置：

  git config --global user.name "Your Name"
  git config --global user.email "[e-mail]"
  

四、Node.js 和 npm 环境变量配置

配置 Node.js 和 npm 的环境变量是确保其正常运行的重要步骤。以下是详细的配置方法：

1. 安装 Node.js 和 npm

从 Node.js 官网 下载适合您操作系统的安装包。

安装时勾选 Add to PATH 选项，这会自动将 Node.js 添加到系统环境变量中。

安装完成后，打开命令提示符，输入以下命令检查版本：

node -v
npm -v

2. 配置全局模块和缓存目录

为了避免默认情况下 npm 将全局模块安装到用户目录（如 C:\Users\<用户名>\AppData\Roaming\npm），建议将全局模块和缓存目录设置到 Node.js 的安装路径下。

步骤：

• 在 Node.js 的安装目录下创建两个文件夹： node_global：用于存储全局模块。 node_cache：用于存储缓存文件。

• 配置 npm 的全局路径和缓存路径：

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

• 验证配置是否成功：

npm config list

3. 设置环境变量

为确保系统能够正确识别 npm 全局模块路径，需要手动配置环境变量。

步骤：

• 打开 系统属性 > 高级系统设置 > 环境变量。

• 在 系统变量 中：

  • 新建变量 NODE_PATH，值为：

  D:\Program Files\nodejs\node_modules
  

  • 编辑 Path 变量，添加以下路径：

  D:\Program Files\nodejs\node_global
  D:\Program Files\nodejs\node_cache
  

4. 更换 npm 镜像源

国内用户建议使用淘宝镜像源以加快下载速度：

npm config set registry https://registry.npmmirror.com

验证是否成功：

npm config get registry

5. 测试配置

安装一个全局模块（如 Express）测试配置是否生效：

npm install -g express

如果安装成功且无报错，说明配置完成。

注意事项

• 确保路径中不要包含空格，以免引发不必要的问题。
• 如果修改后未生效，请重启计算机或重新打开命令提示符。

五、hosts文件

win+R输入C:\Windows\System32\drivers\etc，会跳转到hosts文件

右键hosts文件，点击属性->安全，提高当前账户的权限，能够修改hosts文件。

用记事本打开，例如在文件最后一行添加：

127.0.0.1 localhost.midea.com

保存之后，为了使修改生效，需要刷新DNS缓存：

ipconfig /flushdns

这将清除本地DNS缓存，使

六、辅助应用

markdown（笔记工具）

Typora