{"id":2717,"date":"2018-05-16T09:16:53","date_gmt":"2018-05-16T09:16:53","guid":{"rendered":"https:\/\/www.anagram.at\/?p=2717"},"modified":"2018-05-16T09:22:44","modified_gmt":"2018-05-16T09:22:44","slug":"visual-code-adapt-file-tree-css","status":"publish","type":"post","link":"https:\/\/www.anagram.at\/en\/visual-code-adapt-file-tree-css\/","title":{"rendered":"Visual Code &#8211; Adapt File Tree CSS"},"content":{"rendered":"<p>This is a short explanation to increase the padding (even though other things could be solved similarly) of the file tree used inside Visual Studio Code (or VS Code).<\/p>\n<p>By default the file tree looks like this<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-2715\" src=\"https:\/\/www.anagram.at\/app\/uploads\/2018\/05\/visual-code-file-tree-initial-300x158.jpg\" alt=\"\" width=\"300\" height=\"158\" srcset=\"https:\/\/www.anagram.at\/app\/uploads\/2018\/05\/visual-code-file-tree-initial-300x158.jpg 300w, https:\/\/www.anagram.at\/app\/uploads\/2018\/05\/visual-code-file-tree-initial.jpg 339w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>If you prefer a bigger indent, like this (you can adapt it to your needs), this solution is maybe something for you. Not the cleanest solution but currently Microsoft is not giving us any other out of the box solution. This probably will change in the future.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-2714\" src=\"https:\/\/www.anagram.at\/app\/uploads\/2018\/05\/visual-code-file-tree-adapted-300x158.jpg\" alt=\"\" width=\"300\" height=\"158\" srcset=\"https:\/\/www.anagram.at\/app\/uploads\/2018\/05\/visual-code-file-tree-adapted-300x158.jpg 300w, https:\/\/www.anagram.at\/app\/uploads\/2018\/05\/visual-code-file-tree-adapted.jpg 339w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p><strong>Until then:\u00a0<\/strong><\/p>\n<p>PATH TO YOUR VS CODE INSTALLATION\\resources\\app\\out\\vs\\<wbr \/>workbench\\workbench.main.css<\/p>\n<p>for me this was (Windows 10):\u00a0C:\\Program Files\\Microsoft VS Code<\/p>\n<p><code><br \/>\n.monaco-tree-row[aria-level=\"1\"] { padding-left: 0px !important; }<br \/>\n.monaco-tree-row[aria-level=\"2\"] { padding-left: 26px !important; }<br \/>\n.monaco-tree-row[aria-level=\"3\"] { padding-left: 52px !important; }<br \/>\n.monaco-tree-row[aria-level=\"4\"] { padding-left: 78px !important; }<br \/>\n.monaco-tree-row[aria-level=\"5\"] { padding-left: 104px !important; }<br \/>\n.monaco-tree-row[aria-level=\"6\"] { padding-left: 130px !important; }<br \/>\n.monaco-tree-row[aria-level=\"7\"] { padding-left: 156px !important; }<br \/>\n.monaco-tree-row[aria-level=\"8\"] { padding-left: 182px !important; }<br \/>\n.monaco-tree-row[aria-level=\"9\"] { padding-left: 208px !important; }<br \/>\n.monaco-tree-row[aria-level=\"10\"] { padding-left: 234px !important; }<br \/>\n.monaco-tree-row[aria-level=\"11\"] { padding-left: 260px !important; }<br \/>\n.monaco-tree-row[aria-level=\"12\"] { padding-left: 286px !important; }<br \/>\n.monaco-tree-row[aria-level=\"13\"] { padding-left: 312px !important; }<br \/>\n.monaco-tree-row[aria-level=\"14\"] { padding-left: 338px !important; }<br \/>\n.monaco-tree-row[aria-level=\"15\"] { padding-left: 364px !important; }<br \/>\n<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is a short explanation to increase the padding (even though other things could be solved similarly) of the file tree used inside Visual Studio Code (or VS Code). By default the file tree looks like this If you prefer a bigger indent, like this (you can adapt it to your needs), this solution is [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":""},"categories":[79],"tags":[],"featured_image_src":null,"featured_image_src_square":null,"author_info":{"display_name":"Harald","author_link":"https:\/\/www.anagram.at\/en\/author\/admin\/"},"_links":{"self":[{"href":"https:\/\/www.anagram.at\/en\/wp-json\/wp\/v2\/posts\/2717"}],"collection":[{"href":"https:\/\/www.anagram.at\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.anagram.at\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.anagram.at\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.anagram.at\/en\/wp-json\/wp\/v2\/comments?post=2717"}],"version-history":[{"count":2,"href":"https:\/\/www.anagram.at\/en\/wp-json\/wp\/v2\/posts\/2717\/revisions"}],"predecessor-version":[{"id":2722,"href":"https:\/\/www.anagram.at\/en\/wp-json\/wp\/v2\/posts\/2717\/revisions\/2722"}],"wp:attachment":[{"href":"https:\/\/www.anagram.at\/en\/wp-json\/wp\/v2\/media?parent=2717"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.anagram.at\/en\/wp-json\/wp\/v2\/categories?post=2717"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.anagram.at\/en\/wp-json\/wp\/v2\/tags?post=2717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}