Коллекция навыков разработки Microsoft VS Code

Microsoft анонсировала сериюVS Code tips and tricks, эта статья является уточнением ее перевода, переводчик: Чжан Синьхуэй.

содержание

1. начиная
2. настроить
3. расширять
4. Управление файлами/папками
5. навыки редактирования
6. Интеллектуальная функция обнаружения
7. сегмент кода
8. Git-интеграция
9. отладка
10. выполнение задачи

Упомянутые ниже сочетания клавиш могут не соответствовать последним настройкам устройства. См. официальные инструкции по сочетанию клавиш.

1. Начало работы

Открыть палитру команд

Легко узнать все доступные команды в VS Code.

• Мак:cmd+shift+p or f1
• Windows/Линукс:ctrl+shift+p or f1

Настройки ярлыка

Все команды (и их ярлыки) отображаются в палитре команд. Если вы забудете, как это сделать, вы всегда можете проверить это.

быстро открыть

Быстро открывать файлы, запускать команды (см. ниже)

Mac: cmd+p

Windows / Linux: ctrl+p

Введите "?" для помощи.

Скопируйте и вставьте команды в Quick Open

типcmd+p, затем вставьте команду, которую вы хотите запустить, особенно при просмотре рынка расширений (плагинов).

аргументы командной строки

• Linux: Follow instructions here.
• Windows: Follow instructions here.
• Mac: see below.

Руководство по Linux и справочник по Windows:code.visual studio.com/docs/setup/….

См. ниже рекомендации для Mac:

Откройте палитру команд (F1) → введите «команда оболочки» → введите, чтобы выполнить «Команда оболочки: установить команду« код »в PATH».

# create a new window
code -n

# change the language
code --locale=es

# open diff editor
code --diff <file1> <file2>

# see help options
code --help

папка .vscode

Папка рабочей области находится в.vscode, например, запуск задачиtasks.json, проверка уязвимости естьlaunch.json.

эффект строки состояния

• ошибки и предупреждения
• Mac: shift+cmd+m
• Windows / Linux: ctrl+shift+m

Быстрый переход к ошибкам и предупреждениям.

согласно сf8илиshift+f8, цикл проверки ошибок.

обновить расширение

Приглашение обновить расширение появится в строке состояния в левом нижнем углу.

Изменить языковой режим

• Mac: cmd+k m
• Windows / Linux: ctrl+k m

2. Персональные настройки

В этой части есть много возможностей для индивидуальной игры. Для получения полной информации, пожалуйста, обратитесь к:code.visual studio.com/docs/custom….

Редактор настроек

Откройте файл settings.json.

• Mac: cmd+,
• Windows / Linux: File -> Preferences -> User Settings

Изменить размер шрифта:"editor.fontSize": 18

Измените размер этикетки:"editor.tabSize": 4

пробелы/вкладки:"editor.insertSpaces": правда

Игнорировать файлы/папки

Очищает файлы/папки в окне редактирования.

"files.exclude": {
        "somefolder/": true,
        "somefile": true
}

Удалить файлы/папки из результатов поиска.

"search.exclude": {
    "someFolder/": true,
    "somefile": true
}

Для получения дополнительной информации см.:code.visual studio.com/docs/custom….

Тема предварительного просмотра

Проверка JSON

Во многих файлах по умолчанию установлена ​​проверка json, вы можете создать свой собственный режим проверки в settings.json:

"json.schemas": [
    {
        "fileMatch": [
            "/bower.json"
        ],
        "url": "http://json.schemastore.org/bower"
    }
]

Для схем в рабочей области:

"json.schemas": [
    {
        "fileMatch": [
            "/foo.json"
        ],
        "url": "./myschema.json"
    }
]

Пользовательский режим:

"json.schemas": [
    {
        "fileMatch": [
            "/.myconfig"
        ],
        "schema": {
            "type": "object",
            "properties": {
                "name" : {
                    "type": "string",
                    "description": "The name of the entry"
                }
            }
        }
    },

Для получения дополнительной информации см.:code.visual studio.com/docs/craps….

3. Расширение

Точка вклада

Ссылаться на:code.visual studio.com/docs/ex tens…

• настроить
• Заказ
• горячая клавиша
• язык
• Отладчик
• грамматика
• тема
• сегмент кода
• json проверка

найти расширение

1. Официальная торговая площадка VS Code;
2. поиск товаров (см. ниже);
3. Просмотрите рекомендации по расширениям (см. ниже);
4. Продукты расширения сообщества, такие какawesome-vscode.

Установите расширение

Мак:cmd+shift+p

Windows/Линукс:ctrl+shift+p

Затем введите «дополнительная установка». Выберите подходящее расширение и нажмите Enter.

Расширенная рекомендация

Mac: cmd+shift+p

Windows / Linux: ctrl+shift+p

Введите «ext» → выберите «Показать рекомендации по расширению».

Удалить расширение

Mac: cmd+shift+p

Windows / Linux: ctrl+shift+p

Введите «ext» → выберите «Показать установленные расширения» → нажмите «x» в правом нижнем углу карты расширения.

4. Управление файлами и папками

Макет OS X

Используйте Mission Control, поместите окно терминала и VS Code на один экран, и вы получите интегрированный терминал!

автосохранение

использоватьcmd+,Открытьsettings.json:

"files.autoSave": "afterDelay"

открыть боковую панель

• Mac: cmd+b
• Windows / Linux: ctrl+b

Бок о бокПравить

• Mac: cmd+\ or cmd then click a file from the file browser.
• Windows / Linux: ctrl+\
• Linux: ctrl+2

Переключение редактора

• Mac: cmd+1, cmd+2, cmd+3
• Windows / Linux: ctrl+1, ctrl+2, ctrl+3

Переключиться в окно проводника

• Mac: cmd+shift+e
• Windows / Linux: ctrl+shift+e

закрыть текущую папку

• Linux: ctrl+k f

история

использоватьctrl+tabпросмотреть историю

Просмотр назад:

• Mac: ctrl+-
• Windows / Linux: alt+left

Перейти вперед:

• Mac: ctrl+shift+up
• Windows / Linux: alt+right

открыть файл

• Mac: cmd+e or cmd+p
• Windows / Linux: ctrl+e or ctrl+p

ассоциация файлов

Установите языковые ассоциации (т.е. профили) для файлов, которые не могут быть точно обнаружены:

"file.associations": {
    ".eslintrc": "json"
}

5. Навыки редактирования

соответствие скобки

Для получения дополнительной информации см.:code.visual studio.com/docs/editor…

• Mac: cmd+shift+\
• Windows / Linux: ctrl+shift+\

Выбор нескольких игр

Для получения дополнительной информации см.:code.visual studio.com/docs/editor…

• Mac: opt+cmd+up or opt+cmd+down
• Windows: ctrl+alt+up or ctrl+alt+down
• Linux: alt+shift+up or alt+shift+down

Добавить курсор к текущему выделению.

скопировать строку

• Mac: opt+shift+up or opt+shift+down
• Windows / Linux(Issue #5363): shift+alt+down or shift+alt+up

сузить/расширить выбор

Для получения дополнительной информации см.:code.visual studio.com/docs/editor…

• Mac: ctrl+shift+cmd+left or ctrl+shift+cmd+right
• Windows / Linux: shift+alt+left or shift+alt+right

Поиск символов

• Mac: cmd+shift+o
• Windows / Linux: ctrl+shift+o

настроить таргетинг на определенную строку

• Mac: ctrl+g or cmd+p , :
• Windows / Linux: ctrl+g

отменить позицию курсора

• Mac: cmd+u
• Windows / Linux: ctrl+u

Перемещение вверх или вниз по строке

• Mac: opt+up or opt+down
• Windows / Linux: alt+up or alt+down

Обрезать конечные пробелы

• Mac: cmd+shift+x
• Windows / Linux: ctrl+shift+x

форматирование кода

• Mac: opt+shift+f
• Windows / Linux: shift+alt+f

свертывание кода

• Mac: shift+cmd+[ and shift+cmd+]
• Windows / Linux: ctrl+shift+[ and ctrl+shift+]

выбрать текущую строку

• Mac: cmd+i
• Windows / Linux: ctrl+i

вернуться к началу/концу файла

• Mac: cmd+up and cmd+down
• Windows: ctrl+up and ctrl+down
• Linux: ctrl+home and ctrl+end

Открыть предварительный просмотр README

Использовать в файлах уценки:

• Mac: shift+cmd+v
• Windows / Linux: ctrl+shift+v

Параллельное редактирование и предварительный просмотр Markdown

Использовать в файлах уценки:

• Linux: ctrl+k v

6. Интеллектуальная индукция

проверятьctrl+spaceчтобы активировать панель предложений, которая, возможно, является наиболее полезным предложением.

Просмотрите доступные методы, параметры, краткую документацию и многое другое.

предварительный просмотр (заглянуть)

Выберите символ, введитеalt+f12или используйте контекстное меню.

перейти к определению

Выберите символ, введитеf12или используйте контекстное меню.

Найти все цитаты

Выберите символ, введитеshift+f12или используйте контекстное меню.

Переименование символа

Выберите символ, введитеf2или используйте контекстное меню.

jsconfig.json

существуетjavascriptКонфигурация в корне исходного файлаjsconfig.json, ты можешь использоватьES6 .

{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs"
    }, "exclude": [
        "npm_modules"
    ]
}

.eslintrc.json

Установитьeslint extension. Настройте в соответствии с личными предпочтениями. Ссылка на конкретные инструкции:ESL int.org/docs/user —…

Ниже приведена конфигурация с использованием es6.

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
        "node": true
    },
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true,
            "classes": true,
            "defaultParams": true
        }
    },
    "rules": {
        "no-const-assign": 1,
        "no-extra-semi": 0,
        "semi": 0,
        "no-fallthrough": 0,
        "no-empty": 0,
        "no-mixed-spaces-and-tabs": 0,
        "no-redeclare": 0,
        "no-this-before-super": 1,
        "no-undef": 1,
        "no-unreachable": 1,
        "no-use-before-define": 0,
        "constructor-super": 1,
        "curly": 0,
        "eqeqeq": 0,
        "func-names": 0,
        "valid-typeof": 1
    }
}

package.json

Обратитесь к функции intellisense в файле package.json.

Установите приложение для набора текста

УстановитьtypingsДавайте импортируем файл .d.ts, чтобы активировать функцию javascript intellisense.

npm install typings --global

# Search for definitions.
typings search tape

# Find an available definition (by name).
typings search --name react

# Install typings (DT is "ambient", make sure to enable the flag and persist the selection in `typings.json`).
typings install react --ambient --save

install создаст папку typings. VS Code будет ссылаться на файл .d.ts, чтобы включить IntelliSense.

Синтаксис Эммета

Поддержка синтаксиса Emmet

7. Фрагменты кода

Создать собственный код

File -> Preferences -> User Snippets, выберите язык и создайте фрагмент кода.

"create component": {
    "prefix": "component",
    "body": [
        "class $1 extends React.Component {",
        "",
        "   render() {",
        "       return ($2);",
        "   }",
        "",
        "}"
    ]
},

Для получения дополнительной информации см.:code.visual studio.com/docs/custom…

8. Интеграция с Git

Плавная интеграция рабочих процессов Git.

Diffs

Щелкните значок Git и выберите файл, который вы хотите сравнить.

Бок о бок

По умолчанию разделяется diff.

встроенный вид

Нажмите на опцию «Дополнительно», показанную ниже, чтобы начать встроенное представление.

ветвь

Переключение ветвей легко через строку состояния.

Staging

• Поместить все файлы

Выберите сразу несколько файлов и нажмите кнопку «плюс».

• Выбор этапа

Чтобы подготовить часть файла, используйте стрелки для выбора файла, а затем нажмите кнопку «Дополнительно», чтобы подготовить «выбранные строки».

отменить последний заказ

Просмотр вывода Git

Иногда необходимо разобраться в исправности инструмента. С VS Code легче увидеть, какие команды выполняются, что особенно полезно для изучения Git или устранения проблем с управлением исходным кодом.

Mac: shift+cmd+u

Windows / Linux: ctrl+shift+u

Запустите toggleOutput, чтобы в раскрывающемся списке выбрать Git.

Индикатор бокового слота

Проверьте настройки diff в редакторе. Для получения дополнительной информации см.:code.visual studio.com/docs/editor…

удалить конфликты слияния

Щелкните значок git во время слияния, чтобы внести изменения в представление различий.

Установите VS Code в качестве инструмента слияния по умолчанию

git config --global merge.tool code

9. Отладка

Настроить отладчик

Нажмите F1, выберите «Отладка: открыть Launch.json», выберите среду, а затем создайте файл launch.json. Такие среды, как Node.js, можно запускать напрямую, может потребоваться дополнительная настройка других языков. Для получения дополнительной информации см.:code.visual studio.com/docs/editor…

Точки останова и пошаговое выполнение

Точка останова должна быть рядом с номером строки. Перейдите вперед с плагином отладки.

Проверка данных

Проверьте переменные в панели отладки и консоли.

10. Запуск задачи

Автоматически определять задачи

нажиматьf1, введите «Настроить задачу», затем выберите «Настроить средство выполнения задач», которое создастtask.jsonфайл, содержание следующее. Для получения дополнительной информации см.:code.visual studio.com/docs/editor…

{
    // See http://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "npm",
    "isShellCommand": true,
    "showOutput": "always",
    "suppressTaskName": true,
    "tasks": [
        {
            "taskName": "install",
            "args": ["install"]
        },
        {
            "taskName": "build",
            "args": ["run", "build"]
        }
    ]
}

Иногда автоматическая генерация может дать сбой. Обратитесь к приведенному выше URL-адресу для правильной работы.

Запуск задачи на палитре команд

нажмитеf1, выполните команду «Выполнить задачу» и выберите задачу для запуска. Запустите «Завершить выполнение задачи», чтобы завершить выполнение команды.