Setting up Visual Studio Code?

Question

Visual Studio Code

I'm doing layout and decided to try switching from Sublime Text to Visual Studio Code, but I just can't get used to it. Emmet (creating a block by taboo) does not always work for me, there is not enough auto-completion of the path to the file (in HTML and CSS), an auto-prefixer for CSS, beautiful code formatting with one click.
Prompt settings, suitable plug-ins. And what useful web development plugins can you suggest?

Answer 1

the most basic:
Auto Close Tag - auto closing tags
Auto Rename Tag - renaming paired tags
Beautify - decompressing code (from minify to standard view)
highlight-mathing-tag - highlighting paired tags (need to be configured in the config to make it brighter)
html snippets - snippets as in sublime
insert <br>tag - inserting a newline tag via shift + enter
PHP Debug - debugger for php (need to be configured)
Debugger for Chrome - JS debugger
vscode-icons - icons for VSC
minify - css code compression
auto prefix - auto prefixes
Insert Numbers- a useful extension for
inserting numbers
of a certain format in many places with increments (e.g. for "requere" in node.js) Bookmarks - make bookmarks in the code Bracket Pair Colorizer - highlight paired brackets (square, curly, rectangular, round) very convenient gitignore - adds a .gitignore file under the project (node.js, docker, yii2, laravel, etc.) GitLens - Git supercharged - shows git commits in the code (and the author of the commit, handy in team development) HTML Class Suggestions Live Server
Remote FS- for remote connection via FTP (useful if there are several servers), config example:

{ 
    "remotefs.remote": {"site": {
        "scheme": "ftp",
        "host": "1************01",
        "username": "ad**********ain",
        "password": "Lv************xF",
        "rootPath": "/"
      },
      "site2": {
        "scheme": "ftp",
        "host": "17**********1",
        "username": "a*****************m",
        "password": "************O",
        "rootPath": "/"
      },
      "moy-yandex": {
        "scheme": "ftp",
        "host": "a***********u",
        "username": "a***************mone",
        "password": "1***************W",
        "rootPath": "/"
      }
  }

UPD
There is another good application: Gremlins . It highlights invisible characters in the code. But it needs to be "finished" a little so that it shows the invisible unicode character u + feff (it is often formed when the page encoding is UTF-8 with BOM)
of my own how to finish it, I myself describe in my question: here
, as for snnipets for php: it happens, that they do not work, and there are two reasons: the user presses TAB quickly enough (VSC does not have time to understand that the user has finished typing yet) and when you work in VSC for a long time without restarting the latter.
IMHO: sooner or later this problem will be solved. VSC is developing rapidly and this problem will be solved
I agree with Artem that Brackets has some things better and more optimized than VSC, and for Front-end I work in Brackets more often (mostly because of the ability to see online changes right there in the browser). But the main disadvantage of Brackets from VSC is that with a large number of plugins it is very, very stupid, I also don’t like the work of Brackets-ftp.
Afterword:
VSC is still learning and getting better. Sooner or later, it will overtake Sublime, Atom and other IDEs - it's a matter of time, because: 1) it's open source 2) it finances and leads the development of Microsoft 3) it's free!!! and the last stone in the garden for all major IDEs

Answer 2

Hello!
To the above plugins I would add:

• Bracket Pair Colorizer - for highlighting paired brackets
  
• Class autocomplete for HTML - to autocomplete the class attribute
  
• highlight-matching-tag - for highlighting paired tags
  
• vscode-htmltagwrap - for wrapping selected text in a tag
  
• Live Server - to run a local server and auto-refresh the page in the browser
  
• Settings Sync - to synchronize editor settings between multiple workstations
  

Answer 3

To format the code: Beautify
To autocomplete the path to the file: Path Intellisense
Emmet is built into VS Code, sometimes clumsy, but in the last update I did not notice any problems.