{"id":26814,"date":"2021-01-25T14:03:18","date_gmt":"2021-01-25T05:03:18","guid":{"rendered":"https:\/\/tadtadya.com\/en\/?p=26814"},"modified":"2021-01-25T15:53:06","modified_gmt":"2021-01-25T06:53:06","slug":"atom-html-css-javascript","status":"publish","type":"post","link":"https:\/\/tadtadya.com\/en\/atom-html-css-javascript\/","title":{"rendered":"Atom, Recommended packages for HTML, CSS, and JavaScript development"},"content":{"rendered":"\n<p>Here are some recommended packages for HTML, CSS, and JavaScript in the text editor Atom.<\/p>\n\n\n\n<p>There are two main ways to do this: using an IDE and using a linter.<\/p>\n\n\n\n<!--more-->\n\n\n\n<div class=\"wp-block-origin-block-msg-box\"><div class=\"msgbox msgbox-notice v1\"><i class=\"fas fa-exclamation-triangle icon\"><\/i><div class=\"msg\">\n<p>This is written by a Japanese who can't speak English with the help of translation application. Sorry if it's not good.<\/p>\n<\/div><\/div><\/div>\n\n\n<div id=\"toc\" class=\"idx-lst\">\n\t<input type=\"checkbox\" class=\"chk\" id=\"idx-lst-chk\" name=\"btn\" \/>\n\t<label class=\"idx-lst-hd\" for=\"idx-lst-chk\"><i class=\"fa-solid fa-check-double\"><\/i>Contents<\/label>\n\t<div class=\"idx-lst-bd\">\n\t\t<ul class=\"idx-lst-ul\">\n\t\t\t\t\t\t\t<li class=\"idx-lst-li idt0\">\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"fa-regular fa-hand-point-right ico\"><\/i>\n\t\t\t\t\t\t\t\t\t\t<a href=\"#index-list-1\" title=\"HTML, CSS, and JavaScript are standard and sufficient\">HTML, CSS, and JavaScript are standard and sufficient<\/a>\n\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"idx-lst-li idt0\">\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"fa-regular fa-hand-point-right ico\"><\/i>\n\t\t\t\t\t\t\t\t\t\t<a href=\"#index-list-2\" title=\"Use an IDE (Integrated Development Environment)\">Use an IDE (Integrated Development Environment)<\/a>\n\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"idx-lst-li idt1\">\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"fa-regular fa-hand-point-right ico\"><\/i>\n\t\t\t\t\t\t\t\t\t\t<a href=\"#index-list-3\" title=\"ide-html\">ide-html<\/a>\n\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"idx-lst-li idt1\">\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"fa-regular fa-hand-point-right ico\"><\/i>\n\t\t\t\t\t\t\t\t\t\t<a href=\"#index-list-4\" title=\"ide-css\">ide-css<\/a>\n\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"idx-lst-li idt1\">\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"fa-regular fa-hand-point-right ico\"><\/i>\n\t\t\t\t\t\t\t\t\t\t<a href=\"#index-list-5\" title=\"ide-typescript\">ide-typescript<\/a>\n\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"idx-lst-li idt1\">\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"fa-regular fa-hand-point-right ico\"><\/i>\n\t\t\t\t\t\t\t\t\t\t<a href=\"#index-list-6\" title=\"ide-json\">ide-json<\/a>\n\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"idx-lst-li idt1\">\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"fa-regular fa-hand-point-right ico\"><\/i>\n\t\t\t\t\t\t\t\t\t\t<a href=\"#index-list-7\" title=\"atom-ide-vue\">atom-ide-vue<\/a>\n\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"idx-lst-li idt1\">\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"fa-regular fa-hand-point-right ico\"><\/i>\n\t\t\t\t\t\t\t\t\t\t<a href=\"#index-list-8\" title=\"IDE Debugger\">IDE Debugger<\/a>\n\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"idx-lst-li idt2\">\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"fa-regular fa-hand-point-right ico\"><\/i>\n\t\t\t\t\t\t\t\t\t\t<a href=\"#index-list-9\" title=\"atom-ide-debugger-node\">atom-ide-debugger-node<\/a>\n\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"idx-lst-li idt2\">\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"fa-regular fa-hand-point-right ico\"><\/i>\n\t\t\t\t\t\t\t\t\t\t<a href=\"#index-list-10\" title=\"atom-ide-debugger-react-native\">atom-ide-debugger-react-native<\/a>\n\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"idx-lst-li idt0\">\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"fa-regular fa-hand-point-right ico\"><\/i>\n\t\t\t\t\t\t\t\t\t\t<a href=\"#index-list-11\" title=\"Using linter in the main function\">Using linter in the main function<\/a>\n\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"idx-lst-li idt1\">\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"fa-regular fa-hand-point-right ico\"><\/i>\n\t\t\t\t\t\t\t\t\t\t<a href=\"#index-list-12\" title=\"linter-htmlhint\">linter-htmlhint<\/a>\n\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"idx-lst-li idt1\">\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"fa-regular fa-hand-point-right ico\"><\/i>\n\t\t\t\t\t\t\t\t\t\t<a href=\"#index-list-13\" title=\"linter-sass-lint\">linter-sass-lint<\/a>\n\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"idx-lst-li idt0\">\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"fa-regular fa-hand-point-right ico\"><\/i>\n\t\t\t\t\t\t\t\t\t\t<a href=\"#index-list-14\" title=\"Extra\">Extra<\/a>\n\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"idx-lst-li idt1\">\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"fa-regular fa-hand-point-right ico\"><\/i>\n\t\t\t\t\t\t\t\t\t\t<a href=\"#index-list-15\" title=\"atom-html-preview\">atom-html-preview<\/a>\n\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"idx-lst-li idt0\">\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"fa-regular fa-hand-point-right ico\"><\/i>\n\t\t\t\t\t\t\t\t\t\t<a href=\"#index-list-16\" title=\"Summary\">Summary<\/a>\n\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t<\/div>\n<\/div>\n\n\n\n\n<h2 class=\"is-style-h2df\" id=\"index-list-1\">HTML, CSS, and JavaScript are standard and sufficient<\/h2>\n\n\n\n<p>The Atom editor comes standard with the minimum functionality for HTML, CSS, and JavaScript development.<\/p>\n\n\n\n<p>I have installed very few packages for these, and have no complaints about them.<\/p>\n\n\n\n<div class=\"wp-block-origin-block-em-box em-group em-group-ps\">\n<p>I started learning HTML and CSS in 2003. I have no complaints from that experience.<\/p>\n\n\n\n<p>For those who are about to study, they may be dissatisfied.<\/p>\n<\/div>\n\n\n\n<p>However, the IDE is a different story.<\/p>\n\n\n\n<p>The IDE is highly functional, and of course there are packages for HTML, CSS, and JavaScript.<\/p>\n\n\n\n<p>In an IDE, it is not enough to include HTML, CSS, and JavaScript packages.<\/p>\n\n\n\n<p>(especially input completion and help)<\/p>\n\n\n\n<p>So, here are the packages for IDE and non-IDE, here are the packages for linter.<\/p>\n\n\n\n<p>You can use linter if you like.<\/p>\n\n\n\n<h2 class=\"is-style-h2df\" id=\"index-list-2\">Use an IDE (Integrated Development Environment)<\/h2>\n\n\n\n<p>First, install the packages used in the IDE that we wrote earlier.<\/p>\n\n\n\n<div class=\"wp-block-origin-block-a-link-ext alk-ex\"><a href=\"https:\/\/tadtadya.com\/en\/atom-introducing-recommended-packages-for-all-genres\/\" title=\"Atom, Recommended packages for all genres\"><strong>Atom, Recommended packages for all genres<\/strong> <i class=\"fas fa-angle-double-right\"><\/i><\/a><\/div>\n\n\n\n<p>Again, <strong><a href=\"https:\/\/atom.io\/packages\/atom-ide-ui\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"atom.io - packages - atom-ide-ui\">atom-ide-ui<\/a><\/strong> is the minimum requirement.<\/p>\n\n\n\n<p>There is one each for HTML, CSS, and JavaScript, plus an IDE package for the JavaScript framework and debugger, JSON, etc.<\/p>\n\n\n\n<h3 class=\"is-style-h3df\" id=\"index-list-3\">ide-html<\/h3>\n\n\n\n<p><a href=\"https:\/\/atom.io\/packages\/ide-html\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"https:\/\/atom.io\/packages\/ide-html\">https:\/\/atom.io\/packages\/ide-html<\/a><\/p>\n\n\n\n<p>HTML pack for atom-ide-ui, made by a third party, not by atom officially.<\/p>\n\n\n\n<p>When you hover over an HTML tag, the description of the tag is instantly displayed.<\/p>\n\n\n\n<p>It also displays the hierarchy of HTML tags in the outline.<\/p>\n\n\n\n<p>Clicking on it allows the cursor to jump to the place you want to see or edit, which is worth using for this reason alone.<\/p>\n\n\n\n<h3 class=\"is-style-h3df\" id=\"index-list-4\">ide-css<\/h3>\n\n\n\n<p><a href=\"https:\/\/atom.io\/packages\/ide-css\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"https:\/\/atom.io\/packages\/ide-css\">https:\/\/atom.io\/packages\/ide-css<\/a><\/p>\n\n\n\n<p>This is a CSS pack for atom-ide-ui, made by a third party, not by atom officially.<\/p>\n\n\n\n<p>Just like in HTML, hovering over a CSS property will instantly display its description.<\/p>\n\n\n\n<p>This also shows the CSS selector hierarchy in the outline and allows you to jump the cursor.<\/p>\n\n\n\n<p>It's good that it supports LESS, Saas (SCSS), etc. This package is enough for CSS.<\/p>\n\n\n\n<div class=\"wp-block-origin-block-em-box em-group em-group-note\">\n<p>Sass(Scss), LESS is an extension of CSS. It allows you to write programmatic processes, and outputs a .css file as a result.<\/p>\n\n\n\n<p>The ability to group properties, branch and repeat (if, for) eliminates the need to write the same thing over and over again.<\/p>\n\n\n\n<p>In today's web development, we are no longer editing CSS files directly.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-origin-block-em-box em-group em-group-note\">\n<p>When using LESS or Saas, the description that is instantly displayed shows the converted css.<\/p>\n\n\n\n<p>I installed it to use this feature.<\/p>\n<\/div>\n\n\n\n<h3 class=\"is-style-h3df\" id=\"index-list-5\">ide-typescript<\/h3>\n\n\n\n<p><a href=\"https:\/\/atom.io\/packages\/ide-typescript\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"https:\/\/atom.io\/packages\/ide-typescript\">https:\/\/atom.io\/packages\/ide-typescript<\/a><\/p>\n\n\n\n<p>There is no JavaScript pack for atom-ide-ui.<\/p>\n\n\n\n<p>However, you can substitute a pack of typescript, which has the same ancestor as JavaScript (ECMAScript).<\/p>\n\n\n\n<p>The explanation also says that JavaScript can be used.<\/p>\n\n\n\n<div class=\"wp-block-origin-block-em-box em-group-word-list\">\n<div class=\"wp-block-origin-block-em-box em-group em-group-word\"><details><summary>ECMAScript                    <\/summary>\n<p>A specification for JavaScript; <strong><a href=\"https:\/\/www.ecma-international.org\/\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"Ecma International\">Ecma International<\/a><\/strong> determines the coding rules for JavaScript (formulation and recommendation of the specification).<\/p>\n\n\n\n<p>The substantive work is done by <strong><span class=\"marker-blue\">TC39<\/span><\/strong>, which in turn is recommended by Ecma International. When a recommendation is made, it is given the name \"ES20** (age)\".<\/p>\n\n\n\n<p>Ecma International is originally a European standards organization for electronic communications, so it doesn't just deal with JavaScript.<\/p>\n\n\n\n<p><strong><span class=\"marker-green\">ES2015\uff08ES6\uff09<\/span><\/strong><\/p>\n\n\n\n<p>This is the 6th edition, developed in 2015; it is a significant improvement over the traditional way of writing JavaScript, and there is a lot of information about it on the Internet.<\/p>\n\n\n\n<p>Since ES2015, the specification has been recommended every year, so we stopped using the version number in the official name.<\/p>\n\n\n\n<p>ES6 is a remnant of the old wording. The official documentation says so.<\/p>\n\n\n\n<p>The term ES6 is only allowed because it is a transitional stage of change.<\/p>\n\n\n\n<p><strong><span class=\"marker-green\">ES2016<\/span><\/strong><\/p>\n\n\n\n<p>A specification recommended in 2016; you'll see it referred to as ES7, but it's not as common as ES6 because ES2016 is easier to understand.<\/p>\n\n\n\n<p><strong><span class=\"marker-green\">ES5<\/span><\/strong><\/p>\n\n\n\n<p>JavaScript specification before major changes were made in 2015. Fifth edition, recommended in 2009. Currently, it is a standard that can be run in any browser, no matter how old the version.<\/p>\n\n\n\n<p>Since it is now easy to <strong><span class=\"marker-blue\">transpile<\/span><\/strong> JavaScript, it is used as a way to call JavaScript that is compatible with all browsers.<\/p>\n\n\n\n<p>(Transpile is to convert to another version of a JavaScript program.)<\/p>\n\n\n\n<p><strong><span class=\"marker-green\">ESNext<\/span><\/strong><\/p>\n\n\n\n<p>The next generation of JavaScript specifications. It refers to a specification that has not yet been recommended and is being developed by TC39.<\/p>\n\n\n\n<p>It is often used to refer to ES2015 and later, which are not supported by all browsers.<\/p>\n\n\n\n<p>Since transpiling has become easier, it has become commonplace to program in ESNext, including frameworks such as React, and Node.js plugin development.<\/p>\n\n\n\n<p>Since it is a next generation specification, it is often short and easy to write, and is used in large scale and complex development such as <strong><span class=\"marker-blue\">SPA (Single Page Application)<\/span><\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p><strong><a href=\"https:\/\/kangax.github.io\/compat-table\/es2016plus\/\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"\u5404\u30d6\u30e9\u30a6\u30b6\u3068\u305d\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u304c\u3001\u305d\u308c\u305e\u308c\u306e\u4ed5\u69d8\u306e\u5bfe\u5fdc\u72b6\u6cc1\u3092\u78ba\u8a8d\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3002\">You can check the specification support status of each browser and its version.<\/a><\/strong><\/p>\n<\/details><\/div>\n\n\n\n<div class=\"wp-block-origin-block-em-box em-group em-group-word block\"><details><summary>TC39\uff08Technical Committee 39\uff09<\/summary>\n<p>The technical committee responsible for developing the ECMAScript specification.<\/p>\n\n\n\n<p>Ecma International has many different TC, so they are numbered.<\/p>\n\n\n\n<p>The ECMAScript specification is 39.<\/p>\n\n\n\n<p>The contents and specifications of the work in progress are available on <strong><a href=\"https:\/\/github.com\/tc39\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"GitHub - tc39\">GitHub<\/a><\/strong> for you to check.<\/p>\n\n\n\n<p>The work will be divided into five stages, and Ecma International will make recommendations when all stages are completed.<\/p>\n\n\n\n<figure class=\"wp-block-table aligncenter\"><table><tbody><tr><td>Stage 0<\/td><td>Strawman<\/td><td>What specifications will be introduced?<br>When to start the formulation process?<br>Decide.<\/td><\/tr><tr><td>Stage 1<\/td><td>Proposal<\/td><td>Create a framework for the specification development process and identify problems.<\/td><\/tr><tr><td>Stage 2<\/td><td>Draft<\/td><td>Write in JavaScript for real.<br>Set programming rules.<br>The documentation says to be precise, so don't leave anything ambiguous.<\/td><\/tr><tr><td>Stage 3<\/td><td>Candidate<\/td><td>Open the draft to general developers for feedback.<br>(Trial period)<\/td><\/tr><tr><td>Stage 4<\/td><td>Finished<\/td><td>The state of being ready to be added to the ECMAScript standard.<br>Indicates that a recommendation can be made at any time.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Each browser is not waiting for the recommendation to be made, but may introduce it on its own ahead of time. <strong><a href=\"https:\/\/kangax.github.io\/compat-table\/esnext\/\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"Anyone can check its progress\">Anyone can check its progress<\/a><\/strong>.<\/p>\n\n\n\n<p><strong><a href=\"https:\/\/tc39.github.io\/process-document\/\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"Reference: TC39 official documentation\">Reference: TC39 official documentation<\/a><\/strong><\/p>\n\n\n\n<p><strong><a href=\"https:\/\/github.com\/tc39\/ecma262\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"GitHub - tc39\/ecma262\">GitHub - tc39\/ecma262<\/a><\/strong><\/p>\n<\/details><\/div>\n<\/div>\n\n\n\n<p>This can also be jumped to in the outline, and if you move the cursor over a variable, function, or constant, the explanation will appear instantly.<\/p>\n\n\n\n<p>It's also a programming language, so you can do definition jumps.<\/p>\n\n\n\n<div class=\"wp-block-origin-block-em-box em-group em-group-default\">\n<p>Ctrl + click on variable, function, or constant<\/p>\n<\/div>\n\n\n\n<p>\"Huh? What was this again?\" It's convenient because you can instantly check what you think you're looking for.<\/p>\n\n\n\n<p>Official atom package.<\/p>\n\n\n\n<h3 class=\"is-style-h3df\" id=\"index-list-6\">ide-json<\/h3>\n\n\n\n<p><a href=\"https:\/\/atom.io\/packages\/ide-json\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"https:\/\/atom.io\/packages\/ide-json\">https:\/\/atom.io\/packages\/ide-json<\/a><\/p>\n\n\n\n<p>Although json is now used in many places as a data transfer syntax, it is a data syntax that was originally created for JavaScript objects.<\/p>\n\n\n\n<div class=\"wp-block-origin-block-em-box em-group em-group-default\">\n<p>json = JavaScript Object Notation<\/p>\n<\/div>\n\n\n\n<p>json-ide is a json pack for that atom-ide-ui, and is an official atom package.<\/p>\n\n\n\n<p>You can also jump to this in the outline.<\/p>\n\n\n\n<h3 class=\"is-style-h3df\" id=\"index-list-7\">atom-ide-vue<\/h3>\n\n\n\n<p><a href=\"https:\/\/github.com\/rwatts3\/atom-ide-vue\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"https:\/\/github.com\/rwatts3\/atom-ide-vue\">https:\/\/github.com\/rwatts3\/atom-ide-vue<\/a><\/p>\n\n\n\n<p>This is an IDE pack for the Vue.js JavaScript framework, and should be included by anyone developing with Vue.js.<\/p>\n\n\n\n<p>This package requires the installation of atom's language-vue package.<\/p>\n\n\n\n<p><a href=\"https:\/\/atom.io\/packages\/language-vue\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"https:\/\/atom.io\/packages\/language-vue\">https:\/\/atom.io\/packages\/language-vue<\/a><\/p>\n\n\n\n<h3 class=\"is-style-h3df\" id=\"index-list-8\">IDE Debugger<\/h3>\n\n\n\n<p>The atom-IDE has two debuggers for JavaScript frameworks; the IDE was originally developed by Facebook, so it reflects that.<\/p>\n\n\n\n<p>I feel like it's a direct result of what we used to use internally at Facebook.<\/p>\n\n\n\n<h4 class=\"is-style-h4df\" id=\"index-list-9\">atom-ide-debugger-node<\/h4>\n\n\n\n<p><a href=\"https:\/\/atom.io\/packages\/atom-ide-debugger-node\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"https:\/\/atom.io\/packages\/atom-ide-debugger-node\">https:\/\/atom.io\/packages\/atom-ide-debugger-node<\/a><\/p>\n\n\n\n<p>This is a debugger for Node.js, a framework that is used by all web developers, not just Facebook.<\/p>\n\n\n\n<p>There are so many, and so often used and reliable, JavaScript programs today that it's safe to say that they come out of Node.js package management.<\/p>\n\n\n\n<p>When using Node.js, install it.<\/p>\n\n\n\n<h4 class=\"is-style-h4df\" id=\"index-list-10\">atom-ide-debugger-react-native<\/h4>\n\n\n\n<p><a href=\"https:\/\/atom.io\/packages\/atom-ide-debugger-react-native\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"https:\/\/atom.io\/packages\/atom-ide-debugger-react-native\">https:\/\/atom.io\/packages\/atom-ide-debugger-react-native<\/a><\/p>\n\n\n\n<p>This is a debugger for React, a JavaScript framework.<\/p>\n\n\n\n<p>React is one of the most famous frameworks and was developed by Facebook.<\/p>\n\n\n\n<p>Well, of course there is, isn't there? Because the IDE was also developed by Facebook.<\/p>\n\n\n\n<p>React is probably the most popular and most used, so you will have many opportunities to use it.<\/p>\n\n\n\n<div class=\"wp-block-origin-block-em-box em-group em-group-ps\">\n<p>To be precise, React is a JavaScript package. However, it is often seen as one of the frameworks.<\/p>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator is-style-dots\"\/>\n\n\n\n<p>The next step is to package using linter, which requires a separate package, so the number of packages to install is larger than the IDE.<\/p>\n\n\n\n<div class=\"wp-block-origin-block-msg-box\"><div class=\"msgbox msgbox-notice v1\"><i class=\"fas fa-exclamation-triangle icon\"><\/i><div class=\"msg\">\n<p>linter and IDE cannot coexist. You have to choose one to use.<\/p>\n\n\n\n<p>It also has many of the same features as the IDE. I can't say that one is better than the other.<\/p>\n<\/div><\/div><\/div>\n\n\n\n<h2 class=\"is-style-h2df\" id=\"index-list-11\">Using linter in the main function<\/h2>\n\n\n\n<p>First, install the non-IDE package that I wrote earlier.<\/p>\n\n\n\n<div class=\"wp-block-origin-block-a-link-ext alk-ex\"><a href=\"https:\/\/tadtadya.com\/en\/atom-introducing-recommended-packages-for-all-genres\/\" title=\"Atom, Recommended packages for all genres\"><strong>Atom, Recommended packages for all genres<\/strong> <i class=\"fas fa-angle-double-right\"><\/i><\/a><\/div>\n\n\n\n<p>Based on linter, here are the packages you need for HTML, CSS, and JavaScript.<\/p>\n\n\n\n<p>As I mentioned earlier, the default packages of HTML, CSS, and JavaScript in atom are fully usable.<\/p>\n\n\n\n<p>I've tried to exclude as much as possible the parts that I like, and collected the ones that would be there at least. Please understand that.<\/p>\n\n\n\n<p>It is not necessary for those who are familiar with HTML and CSS and can write more and more while researching on the web.<\/p>\n\n\n\n<p>For those of you who haven't gotten to that point yet and want to be a linter, here are some tips.<\/p>\n\n\n\n<div class=\"wp-block-origin-block-em-box em-group em-group-note\">\n<p>linter is not useful by itself. You need the respective extension packages.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-origin-block-em-box em-group em-group-note\">\n<p>There is no such thing as a good linter for JavaScript.<\/p>\n<\/div>\n\n\n\n<h3 class=\"is-style-h3df\" id=\"index-list-12\">linter-htmlhint<\/h3>\n\n\n\n<p><a href=\"https:\/\/atom.io\/packages\/linter-htmlhint\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"https:\/\/atom.io\/packages\/linter-htmlhint\">https:\/\/atom.io\/packages\/linter-htmlhint<\/a><\/p>\n\n\n\n<p>HTML extension package for linter.<\/p>\n\n\n\n<h3 class=\"is-style-h3df\" id=\"index-list-13\">linter-sass-lint<\/h3>\n\n\n\n<p><a href=\"https:\/\/atom.io\/packages\/linter-sass-lint\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"https:\/\/atom.io\/packages\/linter-sass-lint\">https:\/\/atom.io\/packages\/linter-sass-lint<\/a><\/p>\n\n\n\n<p>Sass(SCSS) extension package for linter. It performs static code checking.<\/p>\n\n\n\n<p>(LESS is not supported.)<\/p>\n\n\n\n<h2 class=\"is-style-h2df\" id=\"index-list-14\">Extra<\/h2>\n\n\n\n<p>This package can coexist with both IDE and linter.<\/p>\n\n\n\n<p>It's a bonus, so you can use it as you like.<\/p>\n\n\n\n<h3 class=\"is-style-h3df\" id=\"index-list-15\">atom-html-preview<\/h3>\n\n\n\n<p><a href=\"https:\/\/atom.io\/packages\/atom-html-preview\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"https:\/\/atom.io\/packages\/atom-html-preview\">https:\/\/atom.io\/packages\/atom-html-preview<\/a><\/p>\n\n\n\n<p>You can open the HTML preview to see the actual page.<\/p>\n\n\n\n<p>Open the HTML source code and press the following key to display the preview screen.<\/p>\n\n\n\n<div class=\"wp-block-origin-block-em-box em-group em-group-default\">\n<p>Ctrl + Shift + h<\/p>\n<\/div>\n\n\n\n<p>In today's web development, writing HTML directly has become much less common. It's not really necessary to do so.<\/p>\n\n\n\n<p>I also use it, but only to look at simple HTML sample code.<\/p>\n\n\n\n<h2 class=\"is-style-h2df\" id=\"index-list-16\">Summary<\/h2>\n\n\n\n<p>Although we have only discussed HTML, CSS, and JavaScirpt, some people may use PHP, which is often used on the server side of the web.<\/p>\n\n\n\n<div class=\"wp-block-origin-block-a-link-ext alk-ex\"><a href=\"https:\/\/tadtadya.com\/en\/atom-php-introducing-packages-recommended-for-development\/\" title=\"Atom, Recommended packages for php development\"><strong>Atom, Recommended packages for php development<\/strong> <i class=\"fas fa-angle-double-right\"><\/i><\/a><\/div>\n\n\n\n<p>In this article, I have only introduced the minimum required package.<\/p>\n\n\n\n<p>If you install too many packages, Atom will become sluggish and unusable.<\/p>\n\n\n\n<p>There are also many useful packages available. Be careful not to install too many of them.<\/p>\n\n\n\n<p>One more thing: Atom has a number of packages with similar functionality. Let's choose just one and install it.<\/p>\n\n<!-- WP QUADS Content Ad Plugin v. 2.0.65.1 -->\n<div class=\"quads-location quads-ad2\" id=\"quads-ad2\" style=\"float:none;margin:0px;\">\n<ul class=\"quads-location-ul\">\r\n<li class=\"quads-location-li li-1\">\r\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\r\n<ins class=\"adsbygoogle\"\r\n     style=\"display:block\"\r\n     data-ad-client=\"ca-pub-4926008942376207\"\r\n     data-ad-slot=\"6550760310\"\r\n     data-ad-format=\"auto\"\r\n     data-full-width-responsive=\"true\"><\/ins>\r\n<script>\r\n     (adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>\r\n<\/li>\r\n<li class=\"quads-location-li li-2\">\r\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\r\n<ins class=\"adsbygoogle\"\r\n     style=\"display:block\"\r\n     data-ad-client=\"ca-pub-4926008942376207\"\r\n     data-ad-slot=\"6550760310\"\r\n     data-ad-format=\"auto\"\r\n     data-full-width-responsive=\"true\"><\/ins>\r\n<script>\r\n     (adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>\r\n<\/li>\r\n<\/ul>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Here are some recommended packages for HTML, CSS, and JavaScript in the text editor Atom. There are two main ways to do this: using an IDE and using a linter.<\/p>\n","protected":false},"author":1,"featured_media":26828,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"jetpack_publicize_message":"Atom, Recommended packages for HTML, CSS, and JavaScript development\n\u3000\n#Atom\n#HTML_CSS\n#JavaScript\n","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_options":[]},"categories":[9,273,274],"tags":[567,568,159,185,186,275,555,562,563,564,565,566],"jetpack_publicize_connections":[],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/tadtadya.com\/en\/wp-content\/uploads\/sites\/2\/2021\/01\/html5-css3-js.png?fit=2288%2C1200&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8Qw77-6Yu","jetpack_likes_enabled":false,"_links":{"self":[{"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/posts\/26814"}],"collection":[{"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/comments?post=26814"}],"version-history":[{"count":1,"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/posts\/26814\/revisions"}],"predecessor-version":[{"id":26993,"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/posts\/26814\/revisions\/26993"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/media\/26828"}],"wp:attachment":[{"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/media?parent=26814"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/categories?post=26814"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/tags?post=26814"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}