Начнём с фундамента — **горячих клавиш (keybindings)**. VS Code позволяет переназначать любые сочетания. Откройте палитру команд (Ctrl+Shift+P), найдите "Preferences: Open Keyboard Shortcuts (JSON)". Здесь вы можете переопределить стандартные привязки. Допустим, вы часто используете терминал. Добавьте свою привязку для его быстрого переключения:
```json
// keybindings.json
[
{
"key": "ctrl+`",
"command": "workbench.action.terminal.toggleTerminal",
"when": "editorTextFocus"
},
{
"key": "ctrl+shift+t",
"command": "workbench.action.reopenClosedEditor"
}
]
```
Следующий шаг — **фрагменты кода (snippets)**. Они экономят массу времени на написании шаблонного кода. Создайте пользовательские сниппеты для вашего языка: File > Preferences > Configure User Snippets. Например, создадим сниппет для React-компонента с TypeScript:
```json
// typescriptreact.json
{
"React TS Functional Component": {
"prefix": "rtsfc",
"body": [
"import React from 'react';",
"",
"interface ${1:ComponentName}Props {",
" ${2:prop}: string;",
"}",
"",
"export const ${1:ComponentName}: React.FC = ({ ${2:prop} }) => {",
" return (",
" ",
" {${2:prop}}",
" ",
" );",
"};"
],
"description": "Creates a React functional component with TypeScript"
}
}
```
Теперь, набрав `rtsfc` и нажав Tab, вы мгновенно получите заготовку компонента.
Одна из самых мощных функций автоматизации — **задачи (Tasks)**. Они позволяют запускать любые внешние команды или скрипты прямо из редактора. Создайте файл `.vscode/tasks.json` в корне вашего проекта. Автоматизируем, например, процесс запуска локального сервера и одновременного открытия браузера. Для Node.js проекта это может выглядеть так:
```json
{
"version": "2.0.0",
"tasks": [
{
"label": "Launch Dev Server",
"type": "shell",
"command": "npm run dev",
"isBackground": true,
"problemMatcher": [],
"presentation": {
"reveal": "always",
"panel": "dedicated"
}
},
{
"label": "Open Browser",
"type": "shell",
"command": "start http://localhost:3000", // Для Windows. Для macOS: "open", для Linux: "xdg-open"
"dependsOn": "Launch Dev Server",
"problemMatcher": []
},
{
"label": "Full Dev Start",
"dependsOrder": "sequence",
"dependsOn": ["Launch Dev Server", "Open Browser"],
"problemMatcher": []
}
]
}
```
Теперь, запустив задачу "Full Dev Start" из палитры команд (Ctrl+Shift+P > Tasks: Run Task), вы одним действием запустите сервер и откроете браузер.
Перейдём к автоматизации с помощью **расширений**. Некоторые расширения радикально повышают продуктивность. Установите их через Marketplace:
- **GitLens**: автоматизирует работу с Git, предоставляя инлайн-аннотации, историю каждой строки кода.
- **Thunder Client или REST Client**: для автоматизации тестирования API без выхода из редактора.
- **Auto Rename Tag**: автоматически переименовывает парный HTML/XML тег.
- **Project Manager**: позволяет быстро переключаться между проектами.
Для продвинутой автоматизации используйте **VS Code API и скрипты на Node.js**. Вы можете написать своё расширение, но для быстрых задач есть более простой путь — использование скриптов через задачи. Создайте файл `scripts/automate.js`:
```javascript
// scripts/automate.js
const fs = require('fs');
const path = require('path');
const { exec } = require('child_process');
// Пример: автоматическое создание структуры папок для нового компонента
const componentName = process.argv[2];
if (!componentName) {
console.error('Please provide a component name');
process.exit(1);
}
const baseDir = path.join(__dirname, '..', 'src', 'components', componentName);
const files = [
{ name: 'index.ts', content: `export { ${componentName} } from './${componentName}';` },
{ name: `${componentName}.tsx`, content: `import React from 'react';\n\nexport const ${componentName} = () => {\n return Hello ${componentName};\n};` },
{ name: `${componentName}.module.css`, content: `/* Styles for ${componentName} */` },
{ name: `${componentName}.test.tsx`, content: `import React from 'react';\nimport { render } from '@testing-library/react';\nimport { ${componentName} } from './${componentName}';\n\ndescribe('${componentName}', () => {\n it('renders correctly', () => {\n const { getByText } = render();\n expect(getByText(/Hello ${componentName}/i)).toBeInTheDocument();\n });\n});` }
];
if (!fs.existsSync(baseDir)) {
fs.mkdirSync(baseDir, { recursive: true });
}
files.forEach(file => {
const filePath = path.join(baseDir, file.name);
fs.writeFileSync(filePath, file.content);
console.log(`Created: ${filePath}`);
});
console.log(`Component "${componentName}" scaffolded successfully!`);
```
И добавьте задачу в `tasks.json` для его запуска:
```json
{
"label": "Scaffold Component",
"type": "shell",
"command": "node ${workspaceFolder}/scripts/automate.js ${input:componentName}",
"problemMatcher": [],
"presentation": {
"echo": false,
"reveal": "silent"
},
"inputs": [
{
"id": "componentName",
"type": "promptString",
"description": "Enter the component name:"
}
]
}
```
Теперь, запустив эту задачу, вы введёте имя компонента, и его полная структура файлов будет создана автоматически.
В завершение дня настройте **профили настроек (Settings Profiles)** или используйте расширение **Settings Sync**, чтобы сохранить всю эту автоматизацию в облаке и применять на любом новом компьютере за минуты.
Автоматизация VS Code — это инвестиция, которая окупается с каждым днём. Потратив один день на настройку этих инструментов, вы сэкономите сотни часов в будущем, уменьшите количество рутинных ошибок и сделаете процесс разработки более приятным и эффективным. Начните с малого — создайте один полезный сниппет или задачу, и вы сразу почувствуете разницу.
Комментарии (8)