{"id":270523,"date":"2018-05-11T07:40:13","date_gmt":"2018-05-11T14:40:13","guid":{"rendered":"http:\/\/css-tricks.com\/?p=270523"},"modified":"2021-11-11T06:18:07","modified_gmt":"2021-11-11T14:18:07","slug":"turn-sublime-text-3-into-a-javascript-ide","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/turn-sublime-text-3-into-a-javascript-ide\/","title":{"rendered":"Turn Sublime Text 3 into a JavaScript IDE"},"content":{"rendered":"\n<p><a href=\"https:\/\/www.sublimetext.com\/\" rel=\"noopener\">Sublime Text<\/a> is one of the <a href=\"https:\/\/insights.stackoverflow.com\/survey\/2018#technology-most-popular-development-environments\" rel=\"noopener\">most popular editors<\/a> for web development and software development in general. It\u2019s very smooth and fast compared to other editors (being written in C++ helps that speed). Sublime also has tons of plugins you can find through <a href=\"https:\/\/packagecontrol.io\/\" rel=\"noopener\">Package Control<\/a>.<\/p>\n\n\n\n<p><strong>But it\u2019s only a text editor and not an <abbr title=\"Integrated Development Environment\">IDE<\/abbr><\/strong>. An <abbr title=\"Integrated Development Environment\">IDE<\/abbr> is a software application that provides comprehensive facilities to computer programmers for software development. In fact, Sublime doesn\u2019t offer features like debugging tools, built-in tools for compiling and running applications, intelligent code suggestions, or code refactoring. Instead it offers a set of <a href=\"https:\/\/www.sublimetext.com\/docs\/3\/api_reference.html\" rel=\"noopener\">API<\/a>s you can use to extend it. Here\u2019s an introduction to the <a href=\"https:\/\/github.com\/pichillilorenzo\/JavaScriptEnhancements\/\" rel=\"noopener\">JavaScript Enhancement<\/a> plugin (my own creation) that makes Sublime a bit more <abbr title=\"Integrated Development Environment\">IDE<\/abbr>-like for JavaScript development.<\/p>\n\n\n\n<!--more-->\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-the-javascript-enhancement-plugin\">What is the JavaScript Enhancement Plugin?<\/h3>\n\n\n<p>It is a plugin for Sublime Text 3 that offers a lot of features useful for creating, developing, and managing JavaScript projects. The most important ones are:<\/p>\n\n\n\n<ol><li>Smart autocomplete<\/li><li>Error detection and linting<\/li><li>Code refactoring<\/li><\/ol>\n\n\n\n<p>Several other features can be found on the <a href=\"https:\/\/github.com\/pichillilorenzo\/JavaScriptEnhancements\/wiki\" rel=\"noopener\">Wiki page<\/a>.<\/p>\n\n\n\n<p>Most of the features are implemented using <a href=\"https:\/\/github.com\/facebook\/flow\" rel=\"noopener\">Flow<\/a> under the hood, which is a <strong>static typechecker<\/strong> for JavaScript created by Facebook (if you know <a href=\"http:\/\/www.typescriptlang.org\/\" rel=\"noopener\">TypeScript<\/a>, it is quite similar). The main objective of this plugin is to turn Sublime Text 3 into a <strong>JavaScript <abbr title=\"Integrated Development Environment\">IDE<\/abbr><\/strong>. It is in active development and it will include other features over time.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-installation\">Installation<\/h3>\n\n\n<p>There are two ways to install it. The simplest one is through <a href=\"https:\/\/packagecontrol.io\/packages\/JavaScript%20Enhancements\" rel=\"noopener\">Package Control<\/a>, the other one is to install it manually following <a href=\"https:\/\/github.com\/pichillilorenzo\/JavaScriptEnhancements\/wiki\/Installation\" rel=\"noopener\">these simple steps<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-requirements\">Requirements<\/h3>\n\n\n<ul><li><strong>Sublime Text 3<\/strong> build <strong>3124<\/strong> or newer<\/li><li><strong>Node.js<\/strong> (6 or newer) and <strong>npm<\/strong><\/li><li><a href=\"https:\/\/github.com\/Wramberg\/TerminalView\" rel=\"noopener\"><strong>TerminalView<\/strong><\/a> Sublime Text plugin (Linux and Mac OS X only)<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-supported-systems\">Supported Systems<\/h3>\n\n\n<p>Because Flow only works on 64-bit systems, this plugin supports:<\/p>\n\n\n\n<ul><li>Mac OS X<\/li><li>Linux (64-bit)<\/li><li>Windows (64-bit)<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-smart-autocomplete\">Smart Autocomplete<\/h3>\n\n\n<p>Sublime Text has its own autocomplete feature, but it lacks power, making it not nearly as useful as it could be. With this plugin, you will get autocompletion based on the <strong>current context<\/strong>, like any other <abbr title=\"Integrated Development Environment\">IDE<\/abbr>. For example, you will get completions from your imported classes defined in other files, such as properties and methods.<\/p>\n\n\n\n<p>Furthermore, the completions list will also contain info about <strong>variables type<\/strong> and <strong>functions signature<\/strong> in order to get a quick overview of them.<\/p>\n\n\n\n<p>Here\u2019s how that works with the plugin:<\/p>\n\n\n\n<figure class=\"wp-block-video wp-block-embed is-type-video is-provider-videopress\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='500' height='281' src='https:\/\/videopress.com\/embed\/oEB5deUf?cover=1&amp;preloadContent=metadata&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script>\n<\/div><\/figure>\n\n\n\n<p>&#8230;and without the plugin:<\/p>\n\n\n\n<figure class=\"wp-block-video wp-block-embed is-type-video is-provider-videopress\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='500' height='281' src='https:\/\/videopress.com\/embed\/ArLf8w7R?cover=1&amp;preloadContent=metadata&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script>\n<\/div><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-error-detection-and-linting\">Error Detection and Linting<\/h3>\n\n\n<p>Sublime Text doesn\u2019t have an error detection and\/or linting system natively. Thanks to Flow, this can be done using its own <a href=\"https:\/\/flow.org\/en\/docs\/cli\/\" rel=\"noopener\">CLI commands<\/a>.<\/p>\n\n\n\n<p>First of all, you need to create a JavaScript project (see the <a href=\"https:\/\/github.com\/pichillilorenzo\/JavaScriptEnhancements\/wiki\/Creating-a-JavaScript-Project\" rel=\"noopener\">Creating a JavaScript Project<\/a> wiki page). In order to let the Flow server check your files, you need to add a special comment in them: <code>\/\/ @flow<\/code>.<\/p>\n\n\n\n<p>You can set also more options in the <code>.flowconfig<\/code> file (see the <a href=\"https:\/\/flow.org\/en\/docs\/config\/\" rel=\"noopener\">official website<\/a> to customize your Flow configuration. For example, if you want to let the Flow server check all files and not just those with <code>@flow<\/code>, you need to set the <code>all<\/code> option to <code>true<\/code>:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">[options]\n# all=off by default\nall=true<\/code><\/pre>\n\n\n\n<p>To let the Flow server check also single files that aren&#8217;t part of a project, you can activate the option in <code>Tools &gt; JavaScript Enhancements &gt; Use Flow checker on current view (Not used in project)<\/code> for each Sublime View. In this case, the Flow server will see only the current view.<\/p>\n\n\n\n<p>Instead, like is says on the <a href=\"https:\/\/flow.org\/en\/docs\/linting\/\" rel=\"noopener\">official website<\/a>, lint settings can be specified in the <code>.flowconfig<\/code> [lints] section as a list of <code>rule=severity<\/code> pairs. These settings apply globally to the entire project. An example is:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">[lints]\n# all=off by default\nall=warn\nuntyped-type-import=error\nsketchy-null-bool=off<\/code><\/pre>\n\n\n\n<p>Lint settings can be specified also directly in a file using <a href=\"https:\/\/flow.org\/en\/docs\/linting\/flowlint-comments\/\" rel=\"noopener\"><code>flowlint<\/code> comments<\/a>. For example:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">\/* flowlint\n*   sketchy-null:error,\n*   untyped-type-import:error\n*\/<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-video wp-block-embed is-type-video is-provider-videopress\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='500' height='281' src='https:\/\/videopress.com\/embed\/wlphgZRz?cover=1&amp;preloadContent=metadata&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script>\n<\/div><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-code-refactoring\">Code Refactoring<\/h3>\n\n\n<p>Sublime Text doesn\u2019t offer a code refactoring system natively. This is realized with the help of Flow CLI commands in order to get the necessary information. At the moment, this plugin offers various code refactoring features, including:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/github.com\/pichillilorenzo\/JavaScriptEnhancements\/wiki\/Code-Refactoring#convert-to-arrow-function\" rel=\"noopener\">Convert to arrow function<\/a><\/li><li><a href=\"https:\/\/github.com\/pichillilorenzo\/JavaScriptEnhancements\/wiki\/Code-Refactoring#export\" rel=\"noopener\">Export<\/a>:\n<ul>\n<li><a href=\"https:\/\/github.com\/pichillilorenzo\/JavaScriptEnhancements\/wiki\/Code-Refactoring#export-function\" rel=\"noopener\">Function<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/pichillilorenzo\/JavaScriptEnhancements\/wiki\/Code-Refactoring#export-class\" rel=\"noopener\">Class<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/pichillilorenzo\/JavaScriptEnhancements\/wiki\/Code-Refactoring#export-variable\" rel=\"noopener\">Variable<\/a><\/li>\n<\/ul>\n<\/li><li><a href=\"https:\/\/github.com\/pichillilorenzo\/JavaScriptEnhancements\/wiki\/Code-Refactoring#safe-copy\" rel=\"noopener\">Safe Copy<\/a><\/li><li><a href=\"https:\/\/github.com\/pichillilorenzo\/JavaScriptEnhancements\/wiki\/Code-Refactoring#safe-move\" rel=\"noopener\">Safe Move<\/a><\/li><li><a href=\"https:\/\/github.com\/pichillilorenzo\/JavaScriptEnhancements\/wiki\/Code-Refactoring#safe-delete\" rel=\"noopener\">Safe Delete<\/a><\/li><li><a href=\"https:\/\/github.com\/pichillilorenzo\/JavaScriptEnhancements\/wiki\/Code-Refactoring#extract\" rel=\"noopener\">Extract<\/a>:\n<ul>\n<li><a href=\"https:\/\/github.com\/pichillilorenzo\/JavaScriptEnhancements\/wiki\/Code-Refactoring#extract-variable\" rel=\"noopener\">Variable<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/pichillilorenzo\/JavaScriptEnhancements\/wiki\/Code-Refactoring#extract-field\" rel=\"noopener\">Field<\/a> (current method, field declaration, class constructor)<\/li>\n<li><a href=\"https:\/\/github.com\/pichillilorenzo\/JavaScriptEnhancements\/wiki\/Code-Refactoring#extract-parameter\" rel=\"noopener\">Parameter<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/pichillilorenzo\/JavaScriptEnhancements\/wiki\/Code-Refactoring#extract-method\" rel=\"noopener\">Method<\/a> (global scope, current scope, class method)<\/li>\n<\/ul>\n<\/li><\/ul>\n\n\n\n<p>Some of them can also have an available <strong>preview<\/strong>. Furthermore, features, such as <a href=\"https:\/\/github.com\/pichillilorenzo\/JavaScriptEnhancements\/wiki\/Code-Refactoring#safe-move\" rel=\"noopener\">Safe Move<\/a>, will work only on JavaScript projects (also here, see the <a href=\"https:\/\/github.com\/pichillilorenzo\/JavaScriptEnhancements\/wiki\/Creating-a-JavaScript-Project\" rel=\"noopener\">Creating a JavaScript Project<\/a> wiki page).<\/p>\n\n\n\n<figure class=\"wp-block-video wp-block-embed is-type-video is-provider-videopress\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='500' height='281' src='https:\/\/videopress.com\/embed\/PnnpJdtY?cover=1&amp;preloadContent=metadata&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script>\n<\/div><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-support\">Support<\/h3>\n\n<h4 class=\"wp-block-heading\" id=\"h-issues-questions\">Issues\/Questions<\/h4>\n\n\n<p>If you have any problems, create an issue. Protip: do a quick search first to see if someone else didn&#8217;t ask the same question before! For small questions, you can use <a href=\"https:\/\/gitter.im\/JavaScriptEnhancements\/Lobby\" rel=\"noopener\">Gitter<\/a>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-feature-requests-and-enhancements\">Feature Requests and Enhancements<\/h4>\n\n\n<p>For feature requests, create an issue or use <a href=\"https:\/\/gitter.im\/JavaScriptEnhancements\/Features\" rel=\"noopener\">Gitter<\/a>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-financial-contributions\">Financial Contributions<\/h4>\n\n\n<p>If this project helps you reduce time to develop and also you like it, please consider supporting it with a donation on <a href=\"https:\/\/www.patreon.com\/bePatron?u=9269604\" rel=\"noopener\">Patreon<\/a>, <a href=\"https:\/\/opencollective.com\/javascriptenhancements\/donate\" rel=\"noopener\">Open Collective<\/a> or using <a href=\"https:\/\/www.paypal.me\/LorenzoPichilli\" rel=\"noopener\">PayPal<\/a>. Thanks!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sublime Text is one of the most popular editors for web development and software development in general. It\u2019s very smooth and fast compared to other editors (being written in C++ helps that speed). Sublime also has tons of plugins you can find through Package Control. But it\u2019s only a text editor and not an IDE. [&hellip;]<\/p>\n","protected":false},"author":252726,"featured_media":270566,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Turn Sublime Text 3 into a JavaScript IDE with this new plugin.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[432,755],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/sublime-text-logo.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":189015,"url":"https:\/\/css-tricks.com\/sublime-text-front-end-developers\/","url_meta":{"origin":270523,"position":0},"title":"Sublime Text for Front End Developers","date":"November 24, 2014","format":false,"excerpt":"The following is a guest post by Wes Bos. Wes has been writing about Sublime Text and all the great stuff it brings to code editing for a while now. He has a new book and video package out now: Sublime Text Power User. I met him at a conference\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":254743,"url":"https:\/\/css-tricks.com\/5-awesome-sublime-plugins-wont-find-top-plugin-posts\/","url_meta":{"origin":270523,"position":1},"title":"5 Awesome Sublime Plugins you Won&#8217;t Find in Top Plugin Posts","date":"May 12, 2017","format":false,"excerpt":"I am a huge fan of Sublime text editor and whenever I go and try other text editors I come back to Sublime crying: \"Forgive me I'll never, ever, leave you again!\" But I'm not here to praise Sublime. In this post I'm rather going to share some of the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":273604,"url":"https:\/\/css-tricks.com\/on-switching-code-editors\/","url_meta":{"origin":270523,"position":2},"title":"On Switching Code Editors","date":"August 1, 2018","format":false,"excerpt":"I'm sure a lot of you are like me and have switched code editors a number of times. I think my first major editor was Coda. Then I moved to TextMate when I started working primarily on local. Then Sublime Text. And, most recently, VS Code. I bet your journey\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/editors-featured.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":17528,"url":"https:\/\/css-tricks.com\/some-things-beginners-might-not-know-about-sublime-text\/","url_meta":{"origin":270523,"position":3},"title":"Some things beginners might not know about Sublime Text","date":"July 15, 2012","format":false,"excerpt":"Some quick hits from Alain Meier on some of the cool stuff Sublime Text 2 can do. I've been using and loving Sublime as my primary code editor for a while now. His list of A. through G. are my favorite features too.","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":254509,"url":"https:\/\/css-tricks.com\/enforcing-css-syntax-style\/","url_meta":{"origin":270523,"position":4},"title":"Enforcing CSS Syntax Style (and more!)","date":"May 16, 2017","format":false,"excerpt":"I bet you have a style that you write CSS in, for the most part. You like 4-spaces, say. You always have a space after braces and colons. You always put a space after rulesets. You only ever put one declaration on a line, and the only declarations that can\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":288109,"url":"https:\/\/css-tricks.com\/graphical-user-interfaces-for-git\/","url_meta":{"origin":270523,"position":5},"title":"Graphical User Interfaces for Git","date":"July 2, 2019","format":false,"excerpt":"Git is command-line-driven software, but that doesn't mean you have to use the command line to make it work. There are lots of options! Some of the deepest programmer nerds I know prefer to use GUIs for Git (Graphic User Interface, or you know, software you can see things and\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/git-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/sublime-text-logo.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/270523"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/252726"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=270523"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/270523\/revisions"}],"predecessor-version":[{"id":356674,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/270523\/revisions\/356674"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/270566"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=270523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=270523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=270523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}