Web 开发工具

已注销
175 阅读11分钟

Web 开发中常用的开发工具如下：Git、Node、npm、VS Code。

Git

Git 是最流行的代码管理工具，当前版本：2.27.0。

1 入门

官方文档：git-scm.com/book/zh/v2

2 配置

2.1 .gitignore

.gitignore 是忽略文件，用来指定不需要提交的文件。

.gitignore 的常见用法：

#    		//注释
*			//忽略所有的文件、目录
dist  		//忽略所有的 dist 文件、目录
dist/  		//忽略所有的 dist 目录
*dist 		//忽略所有以 dist 结尾的文件、目录
*dist/ 		//忽略所有以 dist 结尾的目录
/dist 		//忽略当前目录下的 dist 文件、目录
/dist/ 		//忽略当前目录下的 dist 目录
!dist		//不忽略所有的 dist 文件、目录

注意事项：

  • 项目中可以定义多个 .gitignore，当前目录下的 .gitignore 优先级最高。
  • dist/ ：会忽略 dist 目录下的文件，但是优先级不高

2.2 SSH

Git 可以通过 SSH 方式，安全的验证权限，具体步骤如下：

第一步，在客户端生成 SSH 秘钥：

# -t：秘钥格式 -C：秘钥名称
ssh-keygen -t rsa -C "xxx.com"

**注意：**生成的私钥默认保存在 ~/.ssh/id_rsa；生成的公钥默认保存在 ~/.ssh/id_rsa.pub。

第二步，在服务端配置 SSH 公钥：将生成的公钥的内容复制到指定地方（比如：gitee.com/profile/ssh…

第三步，在客户端添加主机到 SSH 信任列表。比如：

ssh -T git@gitee.com

第四步，在客户端克隆仓库：使用 SSH 方式。比如：

git clone git@gitee.com:jd-platform-opensource/jlog.git

3 常见错误

3.1 git status 中文乱码

解决方法：

git config --global core.quotepath false

3.2 git log 中文乱码

在 win10 的 cmd 中，会出现 git log 中文乱码。

解决办法：在环境变量中设置 LESSCHARSET 为 utf-8

3.3 curl 18 transfer closed

错误提示：

error: RPC failed; curl 18 transfer closed with outstanding read data remaining
fatal: The remote end hung up unexpectedly
fatal: early EOF
fatal: index-pack failed

原因说明：项目太大，超过 git 的最大传输值

方案一：配置传输大小

git config --global http.postBuffer 524288000

方案二：配置传输深度为1

git clone --depth 1 [projectURL] --branch [branchName]

3.4 大小写问题

Git 默认对文件名的大小写不敏感，所以修改文件名的大小写，push后不会生效。

解决方案有两个：

  • 使用git mv命令。比如：git mv Add.js add.js
  • 修改ignorecase配置：git config --global core.ignorecase false

注意：修改ignorecase配置后，将文件名的大小写修改，提交远程仓库时，远程仓库会新增一个同名（大小写不同）文件，而不是直接修改文件名的大小写。

3.5 LF will be replaced by CRLF

出现原因：Windows 的默认换行符为CRLF（回车换行），结果项目中添加了 LF（换行）格式的文件。

解决办法：

第一步，统一使用LF格式（因为 Windows 现在支持 LF 格式）。

第二步，修改 Git 的 autocrlf 配置。

git config --global core.autocrlf false

Node

Node 是一个开源、跨平台的 JavaScript 运行时环境，当前版本：18.15.0。

1 入门

官方文档：nodejs.org/zh-cn/docs

2 gyp 环境

在 Node 项目中有些库会依赖系统底层的库（C/C++ 代码），为了编译这类库，需要借助 node-gyp 工具。其中，node-gyp 是 Node 自带的工具，但是它的运行需要 gyp 环境（支持 node-gyp 运行的工具）。

如果是在 Windows 中安装 gyp 环境，需要在管理员身份的 PowerShell 中，安装 windows-build-tools。

# 安装 windows-build-tools 时，会自动安装 Pyhton
npm i windows-build-tools -g

如果是 mac 中安装 gyp 环境，需要安装 xcode：developer.apple.com/xcode/downl…

npm

npm 是 Node 自带的包管理器。当前版本：6.13.4。

1 配置

npm 的配置分为两种：仓库配置和依赖配置。

1.1 仓库配置

仓库配置是指存放 JS 包的远程仓库的相关配置，包含多个级别（优先级越来越低）的配置信息：

  1. cli config：配置在命令行中，优先级最高，比如：npm --registry registry.npm.taobao.org i
  2. environment config：配置在命令行工具中，比如：Theia的命令行工具自带environment config。**注意：**一般的命令行工具不会配置environment config，像Theia这种定制型的命令行工具才会。
  3. project config：配置在项目目录的 .npmrc 中
  4. user config：配置在用户目录的 .npmrc 中，比如：~/.npmrc
  5. global config：配置在系统目录的 .npmrc 中，优先级最低，比如：/usr/local/etc/.npmrc

仓库配置可以直接修改配置文件，还可以使用 npm 命令行工具进行配置：

# 设置淘宝镜像：userconfig
npm config set registry https://registry.npm.taobao.org  
# 设置淘宝镜像：globalconfig
npm config set registry https://registry.npm.taobao.org -g  

# 查看配置项
npm config list		
# 查看配置项：镜像
npm config get registry										
# 删除配置项：镜像
npm config delete registry

1.2 依赖配置

依赖配置是项目的依赖包的配置信息，包含 package.json 和 package-lock.json。

依赖配置可以使用 npm 生成，比如：

npm init -y

package.json 就是项目的依赖配置文件，格式如下：

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

package-lock.json 是缓存的依赖配置信息，提升下次安装的速度。package-lock.json 有时候会导致安装失败。如果安装失败，可以试试删除 package-lock.json 。

2 查看 JS 包

如果想查看 JS 包的版本信息，可以使用下面的命令：

npm view [package]

如果想查看当前项目安装的 JS 包，可以使用下面的命令：

npm ls

如果想查看全局安装的 JS 包，可以使用下面的命令：

npm ls -g
# -depth=0 表示依赖层次为 0
npm ls -g -depth=0

3 安装 JS 包

3.1 基础操作

如果想安装 package.json 中指定的 JS 包，可以使用下面的命令：

npm i

如果想安装 JS 包，可以使用下面的命令：

npm i [package]
npm i [package]@[version]
npm i [package]@[tag]

如果想安装 JS 包到正式环境或开发环境，可以使用下面的命令：

#  安装到正式环境
npm i [package] -S
#  安装到开发环境：不会被打包工具加载
npm i [package] -D

**注意：**一般情况下，要安装到正式环境中。

3.2 安装依赖失败

安装依赖库时，经常会失败。因为有些依赖库（比如：node-sass），本身安装完后，会自动从github下载额外文件。所以，失败的时从github的文件下载。

解决方案有二个：使用淘宝镜像、修改host

3.2.1 使用淘宝镜像

第一步：查看淘宝镜像，是否支持下载额外文件

第二步，指定额外文件的下载源为淘宝，比如：

# puppeteer
npm config set PUPPETEER_DOWNLOAD_HOST https://npm.taobao.org/mirrors

# electron
npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/
npm config set ELECTRON_BUILDER_BINARIES_MIRROR https://npm.taobao.org/mirrors/electron-builder-binaries/

# node-sass
npm config set SASS_BINARY_SITE https://npm.taobao.org/mirrors/node-sass
3.2.2 修改 host

第一步，获取请求失败的域名对应的IP地址：tool.chinaz.com/dns。比如：api.…

第二步，检查IP是否可访问：ping 18.175.245.253

第三步，配置host：

  • 打开host文件。比如： 打开/private/etc/hosts
  • 添加host。比如：18.175.245.253 api.github.com

第四步，重新下载

4 使用 JS 包

JS 包的使用有两种方式：

  • 模块引用：在 js 文件引用 JS 包并使用。
  • 命令行工具：使用 JS 包提供的命令行工具，直接在控制台进行操作。

模块引用就不用说了，这里主要讲命令行工具。

JS 包安装后，如果有命令行工具，就会在 node_modules/.bin，命令行工具可以通过以下方式运行：

4.1 scripts 命令

scripts 命令是最常见的命令行工具使用方式，步骤如下：

第一步，在 package.json 配置 scripts ，比如：

"scripts": {
  "start": "nodemon index.js"
}

注意：

  • nodemon 是 nodemon 包提供的命令行工具，用于 node 服务的热更新，使用时需要提前安装 nodemon 库。
  • scripts 还可以配置公共的命令行工具，比如："start": "node index.js"

第二步，运行 scripts 命令：

npm start

**注意：**如果是非 start 的 scripts 命令，需要使用 npm run [script] 的命令。

4.2 npx 命令

npx 是 npm5.2 新增的命令，专门用于运行 JS 包提供的命令行工具，比如：

npx nodemon index.js

npx 运行命令行工具时，如果本地安装了 JS 包，则直接使用；如果本地没有安装，那么先将 JS 包下载到缓存目录，然后再使用。

在 Windows 中，npx 的缓存目录是：~/AppData/Local/npm-cache/_npx

4.3 直接运行

直接运行就是直接找到命令行工具，然后运行它，比如：

.\node_modules\.bin\nodemon index.js

4.4 后台运行

在服务器中运行命令行工具时，一般通过 SSH 进行操作，但是 SSH 连接断开后，命令行工具也会停止运行。为了避免这种情况，需要使用后台运行的方式，步骤如下：

第一步，安装 pm2 ，用于 ssh 断开后保持 Node 的运行

npm i pm2 -g

第二步，启动 node 服务：使用 pm2 启动脚本

pm2 start xxx.js

**注意：**如果要关闭 Node 服务，需要使用 pm2 stop 命令。

5 发布 JS 包

5.1 发布包

发布 JS 包的流程如下：

第一步，注册账号：www.npmjs.com/signup

第二步，新建项目：Demo

mkdir Demo ; cd Demo

第三步，初始化项目：

npm init

# 然后填写：package name（包名,比如：g-test）、versio（版本号）、entry point（入口文件，默认是index.js）等

第四步，创建需要发布的包：index.js

/**
 * 获取浮点数
 * @param value 输入的值
 * @param length 小数点后长度
 * @param isFix 小数点后长度是否固定
 */
module.exports = function ({ value, length = 2, isFix = false }) {
  let result = parseFloat(value);
  if (isNaN(result)) return "";

  if (isFix) {
    result = result.toFixed(length);
  } else {
    let level = Math.pow(10, length);# 位数
    result = Math.round(result * level) / level;
  }
  return result;
};

第五步，登录账号：

npm addUser

第六步，发布包。注意：需要使用npmjs仓库。

npm publish --registry http://registry.npmjs.org/

5.2 使用包

第一步，安装包：

npm i g-test -S

第二步，使用包：

const gTest=require('g-test');

let num =gTest({value:'2.232323'});
console.log('num',num)

5.3 更新包

第一步，修改包对应的代码

第二步，修改版本号：

npm version 1.0.1

第三步，发布更新包：

npm publish --registry http://registry.npmjs.org/

5.4 删除包

删除包：

npm unpublish g-test --force --registry http://registry.npmjs.org/

VS Code

VS Code（Visual Studio Code）是一个轻量级但功能强大的源代码编辑器，可用于Windows，macOS和Linux。它内置了对 JS、TS 的支持，通过丰富的扩展支持其他语言（比如：Java）。当前版本：1.76.2。

1 安装

VS Code 的安装：code.visualstudio.com/Download

2 基础设置

2.1 配置文件

配置文件分为以下两种：

  • 全局配置：~/AppData/Roaming/Code/User/settings.json。在 VS Code上设置全局配置：Manage > Settings > User。
  • 项目配置：[项目目录]/.vscode/settings.json 。在 VS Code上设置项目配置：Manage > Settings > Workspace。

配置文件主要包含以下内容：

  • 文本编辑：字体、格式化类型等。
  • 插件配置：搜索、命令行、代码调试等插件的配置。
  • 扩展配置：JS、TS、Git 等扩展的配置。这里包含内置扩展和外部扩展。

常见的配置项：

{
  "files.autoSave": "afterDelay",
  "workbench.colorTheme": "Default Light+",
  // 防止自动关闭未编辑的文件
  "workbench.editor.enablePreview": false
}

2.2 代码格式化

代码格式化就是按照指定的规则修改代码的排版格式，比如：首行空格、一行字数。

VS Code 内置的扩展支持对常见语言的代码格式化，比如：vscode.json-language-features 对 JSON 的格式化。但是每种语言都需要单独配置，太过麻烦，推荐使用 Prettier 扩展进行统一的代码格式化。

Prettier 扩展的使用方法如下：

第一步，安装 Prettier 扩展：Extensions > Prettier - Code formatter。**当前版本：**5.10.4。

第二步，设置 Prettier 扩展：在全局配置文件中添加以下内容。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.printWidth": 120,
  "prettier.singleQuote": true,
  "prettier.jsxBracketSameLine": true,
  "prettier.bracketSpacing": false,
  "prettier.endOfLine": "auto",
  "prettier.trailingComma": "none"
}

Prettier 配置文件的解释：

  • printWidth: 一行最多显示的字符数。默认值：80。
  • singleQuote: 使用单引号而不是双引号。默认值：false。
  • bracketSameLine：将多行JSX元素的>放在最后一行的末尾。默认值：false。
  • bracketSpacing：在对象的括号中打印空格。默认值：true。
  • endOfLine: 指定行尾的结束符。建议为'auto'，否则可能报错：Delete ␍eslint(prettier/prettier)
  • trailingComma：在多行逗号分隔的句法结构中尽可能打印尾随逗号。默认值：'es5'。

**注意：**如果设置了语法级别的格式化方式，那么通用的格式化方式就会失效，比如：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  }
}

2.3 语法检查

语法检查就是编辑代码时检查代码的语法格式，比如：变量是否声明。

VS Code 内置的扩展支持对常见语言的语法检查，比如：内置的 ts 扩展 对 JS、TS 的语法检查。

关于 JS、TS 的语法检查：

  • JS 建议使用 ESLint 扩展进行更加强大的语法检查。
  • TS 使用内置的语法检查就够了，因为 TS 有严格的类型声明。

2.4 快捷键

Window：

  • F2：重命名属性名及其引用。注意：需要先鼠标点击属性名。
  • Ctrl + /：单行注释
  • Ctrl + F：当前页查找
  • Ctrl + Shift + F：全局查找
  • Ctrl + Shift + K：删除一行
  • Ctrl + G + 文件名：搜索文件
  • Ctrl + G + @ + 方法名：搜索方法
  • Ctrl + G + : + 行数：跳转指定行数
  • Alt + Up/Down：上移或下移一行
  • Alt + Shift + Up/Down：复制一行
  • Alt + Shift + F：格式化代码。
  • Ctrl + K Ctrl + 0：折叠所有代码
  • Ctrl + K Ctrl + J：展开所有代码

Mac：

  • Option+Shift+F：格式化代码。

3 扩展

3.1 HTML

HTML 相关的扩展：

  • Live Server：通过启动本地服务的方式访问 HTML。

3.1 Vue

Vue 相关的扩展：

  • Vetur：Vue2 的语法提示。
  • Volar：Vue3 的语法提示。
  • Vue-helper：支持基于 Vue 的 template 的代码跳转。
3.1.1 Vetur

Vetur 扩展支持.vue文件的语法高亮显示，除了支持template模板以外，还支持大多数主流的前端开发脚本和插件，比如Sass和TypeScript。当前版本：v0.34.1。

Vetur 插件只能识别根项目下的 package.json 和 jsconfig.json，如果想识别非根项目下的配置文件，只需要在仓库根项目下配置 vetur.config.js：

//vetur的配置文件
module.exports = {
  projects: [
    // root 代表项目路径，package 代表相对于 root 的 package.json 路径，jsconfig 代表相对于 root 的 jsconfig.json 路径
    {root: './VueH5', package: './package.json', jsconfig: './jsconfig.json'},
    {root: './VuePC', package: './package.json', jsconfig: './jsconfig.json'},
  ],
};
avatar
文章
阅读
粉丝