{"componentChunkName":"component---src-templates-blog-post-js","path":"/sublime-text-packages-for-frontend-developers/","result":{"data":{"site":{"siteMetadata":{"title":"ngtan","author":"Tan Nguyen"}},"markdownRemark":{"id":"a6b526a7-fe82-527b-bc31-1a1749acc403","excerpt":"Two days ago, I didn’t know why I can’t login to my computer, even though it still worked before. I tried several different ways to access but it didn’t work…","html":"<p>Two days ago, I didn’t know why I can’t login to my computer, even though it still worked before. I tried several different ways to access but it didn’t work. Eventually, I installed a new macOS.</p>\n<p>As you already known, we had to install variety of things for working. I’m really keen on Sublime Text IDE. Thereforce, I noted installed sublime text packages and IDE settings in case of occurring the same problem.</p>\n<h3>Installed packages</h3>\n<ul>\n<li><a href=\"https://packagecontrol.io/packages/AutoFileName\">AutoFileName</a>\nSublime Text plugin that autocompletes filenames</li>\n<li><a href=\"https://packagecontrol.io/packages/Babel\">Babel</a>\nSyntax definitions for ES6 JavaScript with React JSX extensions</li>\n<li><a href=\"https://packagecontrol.io/packages/BracketHighlighter\">Bracket​Highlighter</a>\nBracket and tag highlighter for Sublime Text</li>\n<li><a href=\"https://packagecontrol.io/packages/Color%20Highlighter\">Color Highlighter</a>\nA plugin for the Sublime text 2 and 3, which underlays selected hexadecimal colorcodes with their real color. Also, plugin adds color picker to easily modify colors.</li>\n<li><a href=\"https://packagecontrol.io/packages/DocBlockr\">DocBlockr</a>\nSimplifies writing DocBlock comments in Javascript, PHP, CoffeeScript, Actionscript, C &#x26; C++</li>\n<li><a href=\"https://packagecontrol.io/packages/EditorConfig\">EditorConfig</a>\nHelps developers maintain consistent coding styles between different editors</li>\n<li><a href=\"https://packagecontrol.io/packages/Emmet\">Emmet</a>\nEmmet for Sublime Text</li>\n<li><a href=\"https://packagecontrol.io/packages/Git\">Git</a>\nPlugin for some git integration into sublime text</li>\n<li><a href=\"https://packagecontrol.io/packages/GitGutter\">Git​Gutter</a>\nA Sublime Text 2/3 plugin to see git diff in gutter</li>\n<li><a href=\"https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify\">HTML-CSS-JS Prettify</a>\nHTML, CSS, JavaScript, JSON, React/JSX and Vue code formatter for Sublime Text 2 and 3 via node.js</li>\n<li><a href=\"https://packagecontrol.io/packages/JavaScript%20%26%20NodeJS%20Snippets\">Java​Script &#x26; Node​JS Snippets</a>\nJavaScript &#x26; NodeJS Snippets for Sublime Text 2/3</li>\n<li><a href=\"https://packagecontrol.io/packages/Placeholders\">Placeholders</a>\nPlaceholder HTML &#x26; content (lorem ipsum) package for Sublime Text</li>\n<li><a href=\"https://packagecontrol.io/packages/Pug\">Pug</a>\nA comprehensive textmate / sublime text bundle for the Pug (formerly Jade) template language</li>\n<li><a href=\"https://packagecontrol.io/packages/SCSS\">SCSS</a>\nThe TextMate SCSS Official Bundle. Now Compatible with SublimeText2.</li>\n<li><a href=\"https://packagecontrol.io/packages/SublimeCodeIntel\">Sublime​Code​Intel</a>\nFull-featured code intelligence and smart autocomplete engine</li>\n<li><a href=\"https://packagecontrol.io/packages/Terminus\">Terminus</a>\nBest Terminal Emulator of Sublime Text</li>\n</ul>\n<h3>IDE settings</h3>\n<p>Preferences → Settings</p>\n<div class=\"gatsby-highlight\" data-language=\"json\"><pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">{</span>\n  <span class=\"token property\">\"tab_size\"</span><span class=\"token operator\">:</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">\"translate_tabs_to_spaces\"</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">\"trim_trailing_white_space_on_save\"</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">\"ensure_newline_at_eof_on_save\"</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">\"word_wrap\"</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">\"highlight_line\"</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">\"folder_exclude_patterns\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n    <span class=\"token string\">\".svn\"</span><span class=\"token punctuation\">,</span>\n    <span class=\"token string\">\".git\"</span><span class=\"token punctuation\">,</span>\n    <span class=\"token string\">\".hg\"</span><span class=\"token punctuation\">,</span>\n    <span class=\"token string\">\"CVS\"</span><span class=\"token punctuation\">,</span>\n    <span class=\"token string\">\"node_modules\"</span>\n  <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">\"font_size\"</span><span class=\"token operator\">:</span> <span class=\"token number\">11</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">\"ignored_packages\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n    <span class=\"token string\">\"Markdown\"</span><span class=\"token punctuation\">,</span>\n    <span class=\"token string\">\"Vintage\"</span>\n  <span class=\"token punctuation\">]</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<h3></h3>\n<p><em>Installed packages are being updated.</em></p>","timeToRead":2,"frontmatter":{"title":"Sublime Text Packages For Front-end Developers","date":"April 28, 2019"}}},"pageContext":{"slug":"/sublime-text-packages-for-frontend-developers/","previous":{"fields":{"slug":"/how-to-remove-the-whitespace-between-inline-block-elements/"},"frontmatter":{"title":"How to remove the whitespace between inline-block elements"}},"next":{"fields":{"slug":"/singapore-malaysia-journey/"},"frontmatter":{"title":"Singapore & Malaysia Journey"}}}}}