Boost Your Coding Efficiency with Claude Code: A Step‑by‑Step Guide
This article introduces Claude Code, an agentic command‑line AI coding assistant, explains its core features, walks through installation via Node.js, demonstrates a full Markdown editor project using Vue3, and details built‑in commands that streamline development tasks.
Overview
Claude Code is an agentic command‑line programming assistant released by Anthropic. It can recursively read an entire codebase, generate or modify source files, run test suites, debug failures, and orchestrate multi‑step development workflows directly from the terminal.
Key capabilities
Full‑project context awareness – traverses the directory tree, builds a dependency graph, and retains architectural patterns in memory.
Autonomous task execution – plans a sequence of actions (write code, run npm test, commit changes) and carries them out without manual step‑by‑step commands.
Terminal‑first integration – operates entirely within a shell, avoiding IDE‑browser context switches.
Version‑control automation – executes git add, git commit, git push and can synthesize concise commit messages.
Human‑in‑the‑loop safety – any high‑risk operation (file creation, dependency install, push) requires explicit user confirmation.
Installation
Install Node.js v20.x (download from https://nodejs.org/zh-cn/download/).
Install the CLI package globally: npm install -g @anthropic-ai/claude-code Verify the installation:
claude --versionConfiguration
Create a settings file C:\Users\<username>\.claude\settings.json with the authentication token and model endpoint. Example for the Volcengine platform:
{
"env": {
"ANTHROPIC_AUTH_TOKEN": "<ARK_API_KEY>",
"ANTHROPIC_BASE_URL": "https://ark.cn-beijing.volces.com/api/coding",
"ANTHROPIC_MODEL": "<Model_Name>"
}
}Bypass the first‑run onboarding restriction by adding a second file C:\Users\<username>\.claude.json:
{
"hasCompletedOnboarding": true
}Start the assistant with:
claudeUsage demonstration – Web‑based Markdown editor
Develop a Markdown editor using Vue 3, Element‑Plus, and TypeScript.
Prompt supplied to Claude Code:
用户需求:开发一个Markdown编辑器
功能描述:
- 左侧为Markdown编辑器,右侧为预览区
- 文件列表、编辑、删除、保存功能
- 文件重命名功能
- 支持深色和浅色主题
UI 采用 Material Design
技术栈:Vue3 + Element‑Plus + TypeScriptClaude Code first generated a specification document, then asked for permission to create files. After confirming, it wrote the project structure, installed dependencies, ran the build command, and the application launched successfully on the first attempt.
When the initial UI showed small rename/delete buttons and lacked syntax highlighting, a follow‑up request was issued:
请将左侧文件列表的按钮放大并添加代码高亮功能。Claude Code applied the changes, updated the component styles, and added a syntax‑highlighting library. The revised UI matched the expected design.
Built‑in commands
/btw– ask a quick question without interrupting the current workflow. /plan – switch to planning mode; Claude Code brainstorms and refines requirements but does not execute file operations. /model – change the underlying LLM model at runtime. /config – open the configuration panel (e.g., toggle “thinking mode”). /context – display the current memory size; useful for monitoring token usage. /compact – compress stored context to keep usage between 20 %–40 % of the token limit. /clear – erase all context, forcing Claude Code to start with a clean slate when it begins hallucinating. /rewind – roll back the most recent file operations. /resume or claude -c – restore a previously saved session.
Reference
https://code.claude.com/docs/zh-CN/overview
Su San Talks Tech
Su San, former staff at several leading tech companies, is a top creator on Juejin and a premium creator on CSDN, and runs the free coding practice site www.susan.net.cn.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.
