Мои настройки VSCode.

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

Посмотрите настройки для отдельного проекта в моем блоге - Кастомизация темы VSCode.

Расширения:

1. Code Runner
2. ESLint
3. Prettier - Code formatter
4. Bracket Pair Colorizer
5. ES7 React/Redux/GraphQL/React-Native snippets
6. vscode-styled-components
7. Russian Language Pack for Visual Studio Code
8. Live Server
9. Sass
10. Sass Formatter
11. Highlight Matching Tag
12. Reactjs code snippets
13. Markdown PDF

Как правило, о назначении того или иного расширения, можно догадаться из его названия. Если, нет, то пройдите по ссылке и посмотрите в описании.

В интернете очень много статей посвященных настройке этого редактора. Предлагается масса расширений, но я думаю, что это зависит от текущих задач и предпочтений пользователя.

Настройки settings.json

Некоторые настройки вы можете увидеть в файле settings.json.Чтобы открыть его в windows, достаточно посмотреть в папке пользователя ( у меня это C:/Users/YaroslavW) в папку AppData.

Эта папка, обычно, является скрытой, поэтому вам необходимо вначале произвести несколько простых настроек - Отображение скрытых файлов.

Еще один простой способ найти этот файл это в открытом редакторе VS Code пройти по пути :

File -> Preferences -> Settings -> Extensions -> Scroll down and find "Edit in settings.json"

откроется часть кода из этого файла, но зато вы сможете легко узнать к нему путь

После этого пройти по пути - AppData/Roaming/Code/User/settings.json и открыть его в VS Code:

settings.json

{
  "editor.fontSize": 18,
  "window.zoomLevel": 1,
  "highlight-matching-tag.styles": {
    "opening": {
      "left": {
        "custom": {
          "borderWidth": "0 0 0 1px",
          "borderStyle": "dotted",
          "borderColor": "white",
          "borderRadius": "5px",
          "overviewRulerColor": "white"
        }
      },
      "right": {
        "custom": {
          "borderWidth": "0 1px 0 0",
          "borderStyle": "dotted",
          "borderColor": "white",
          "borderRadius": "5px",
          "overviewRulerColor": "white"
        }
      }
    }
  },
  "terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html",
    "razor": "html",
    "plaintext": "jade"
  },
  "emmet.syntaxProfiles": {
    "javascript": "jsx",
    "Javascript": "html"
  },
  "terminal.integrated.fontSize": 16,
  "editor.formatOnPaste": true,
  "editor.tabSize": 2,
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "javascript.updateImportsOnFileMove.enabled": "always",
  "editor.formatOnSave": true,
  "emmet.triggerExpansionOnTab": true,
  "files.autoSave": "afterDelay",
  "editor.minimap.enabled": false,
  "workbench.colorTheme": "Solarized Dark",
  "typescript.tsserver.watchOptions": {
    
  
  }
}

Вы можете изменить настройки на те, которые вам нравятся, благо, что в интернете масса примеров. Там же вы можете найти настройки этого файла по умолчанию.

Не забывайте, что для каждого проекта можно задать собственные настройки в таком же файле setting.json, только поместив его в корне проекта в папку имя которой начинается с точки:.vscode.

Но это уже другая история...

Хотите освоить самые современные методы написания React приложений? Надоели простые проекты? Нужны курсы, книги, руководства, индивидуальные занятия по React и не только? Хотите стать разработчиком полного цикла, освоить стек MERN, или вы только начинаете свой путь в программировании, и не знаете с чего начать, то пишите через форму связи, подписывайтесь на мой канал в Телеге, вступайте в группу на Facebook. Пишите мне - kolesnikovy70 почта gmail.com

Удачного кодирования!                                                                                                                                                              

Телеграм канал - Full Stack JavaScript Developer

---

Помочь проекту (любая валюта). DONATE

Кастомизация темы VSCode.

Кастомизация — индивидуализация продукции под заказы конкретных потребителей путём внесения конструктивных или дизайнерских изменений.

Сегодня я хочу вам рассказать об очень простой штуке, которая во многом, я уверен, облегчит жизнь всем тем, кто работает в редакторе VSCode. Речь пойдет о некоторых возможностях кастомизировать (настроить для ваших нужд и вкусов) тему самого редактора.

Для меня это оказалось очень полезным, потому что я очень часто работаю над большими проектами, где есть отдельные папки для фронт, бекенда и пр. Часто они открыты в разных окнах и каждый раз внося изменения, мне приходится проверят - "где я", чтобы не ошибиться.

Подумал, что было бы здорово, если бы можно было отличать их по визуальным признакам. Например - какой-либо особенный цвет верхней панели, или еще что-нибудь. Потом захотелось менять всю тему от проекта, к проекту, говорят, что это способствует лучшей усидчивости и откладывает "выгорание" на долгий срок. Короче говоря, приступаем.

Погнали!

1. Открываем редактор VSCode. Идем в настройки. Ctrl + +, или по длинному пути - нажимаем внизу, слева - шестеренку и выбираем "Параметры"







2. В строке поиска (сверху) забиваем - title и нас сразу перекинет в нужную часть настроек. Там опускаемся чуть ниже и ищем такие строки:

   "Window: Title Bar Style
   Вы можете настроить внешний вид заголовка окна. В Linux и Windows этот параметр также влияет на внешний вид меню приложения и контекстного меню. Для применения изменений требуется полная перезагрузка."

   В выпадающем списке выбираем пункт - Custom. VSCode - редактор, сообщит, что изменения вступят в силу сразу после перезагрузки редактора







3. Теперь остается только добавить нужные изменения, чтобы редактор VSCode их отобразил. Для этого, если вы вносите изменения в готовый проект, то ищите в нем папку .vscode, а в ней файл settings.json. Если проект новый, или хотите выделить какую-то отдельную папку, то нужно создать эту папку и в ней файл. У меня в нем уже были прописаны пара моих настроек (автосохранение и размер шрифта) и сразу после них, добавим строки отвечающие за цвет шрифта и окраску верхней панели


settings.json

{
   "files.autoSave": "onWindowChange",
   "editor.fontSize": 16,
   "workbench.colorCustomizations": {
       "titleBar.activeForeground": "#000",
       "titleBar.inactiveForeground": "#000000CC",
       "titleBar.activeBackground": "#51ff00",
       "titleBar.inactiveBackground": "#51ff00cc",
   }
}



Не забывайте добавить запятую, перед вставкой вашего куска кода!

Как вы можете легко понять из названий свойств, то мы поменяли только верхнюю панель (title).

Ctrl + S - сохраняем, чтобы изменения вступили в силу.

Если вы хотите внести дополнительные изменения в саму тему именно этого проекта, то можете добавить еще некоторые настройки. Например:

settings.json

{
  "files.autoSave": "onWindowChange",
  "editor.fontSize": 16,
  "workbench.colorCustomizations": {
    "titleBar.activeForeground": "#000",
    "titleBar.inactiveForeground": "#000000CC",
    "titleBar.activeBackground": "#51ff00",
    "titleBar.inactiveBackground": "#51ff00cc",
    "editorGroupHeader.tabsBackground": "#1d262a",
    "editorWhitespace.foreground": "#263238", // theme background
    "background": "#FF00FF",
    "badge.foreground": "#B4B4B4",
    "panel.border": "#1d262a",
    "sideBar.foreground": "#B4B4B4",
    "sideBar.background": "#1d262a",
    "statusBar.background": "#1d262a",
    "tab.border": "#546e7a",
    "tab.inactiveForeground": "#B4B4B4",
    "tab.inactiveBackground": "#1d262a"
  }
}

Общий вид темы будет таким:

Вы можете поиграться с цветами фона основной области, боковой панели и вообще лучше разобраться в том, что за что отвечает, хотя это понятно из названий свойств, но иногда хочется добавить новых красок в проект, чтобы работать над ним было легко и приятно.

Хотите освоить самые современные методы написания React приложений? Надоели простые проекты? Нужны курсы, книги, руководства, индивидуальные занятия по React и не только? Хотите стать разработчиком полного цикла, освоить стек MERN, или вы только начинаете свой путь в программировании, и не знаете с чего начать, то пишите через форму связи, подписывайтесь на мой канал в Телеге, вступайте в группу на Facebook.

Удачного кодирования!                                                                                                                                                              

Телеграм канал - Full Stack JavaScript Developer

---

Помочь проекту (любая валюта). DONATE