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.
This is written by a Japanese who can't speak English with the help of translation application. Sorry if it's not good.
- HTML, CSS, and JavaScript are standard and sufficient
- Use an IDE (Integrated Development Environment)
- ide-html
- ide-css
- ide-typescript
- ide-json
- atom-ide-vue
- IDE Debugger
- atom-ide-debugger-node
- atom-ide-debugger-react-native
- Using linter in the main function
- linter-htmlhint
- linter-sass-lint
- Extra
- atom-html-preview
- Summary
HTML, CSS, and JavaScript are standard and sufficient
The Atom editor comes standard with the minimum functionality for HTML, CSS, and JavaScript development.
I have installed very few packages for these, and have no complaints about them.
I started learning HTML and CSS in 2003. I have no complaints from that experience.
For those who are about to study, they may be dissatisfied.
However, the IDE is a different story.
The IDE is highly functional, and of course there are packages for HTML, CSS, and JavaScript.
In an IDE, it is not enough to include HTML, CSS, and JavaScript packages.
(especially input completion and help)
So, here are the packages for IDE and non-IDE, here are the packages for linter.
You can use linter if you like.
Use an IDE (Integrated Development Environment)
First, install the packages used in the IDE that we wrote earlier.
Again, atom-ide-ui is the minimum requirement.
There is one each for HTML, CSS, and JavaScript, plus an IDE package for the JavaScript framework and debugger, JSON, etc.
ide-html
https://atom.io/packages/ide-html
HTML pack for atom-ide-ui, made by a third party, not by atom officially.
When you hover over an HTML tag, the description of the tag is instantly displayed.
It also displays the hierarchy of HTML tags in the outline.
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.
ide-css
https://atom.io/packages/ide-css
This is a CSS pack for atom-ide-ui, made by a third party, not by atom officially.
Just like in HTML, hovering over a CSS property will instantly display its description.
This also shows the CSS selector hierarchy in the outline and allows you to jump the cursor.
It's good that it supports LESS, Saas (SCSS), etc. This package is enough for CSS.
Sass(Scss), LESS is an extension of CSS. It allows you to write programmatic processes, and outputs a .css file as a result.
The ability to group properties, branch and repeat (if, for) eliminates the need to write the same thing over and over again.
In today's web development, we are no longer editing CSS files directly.
When using LESS or Saas, the description that is instantly displayed shows the converted css.
I installed it to use this feature.
ide-typescript
https://atom.io/packages/ide-typescript
There is no JavaScript pack for atom-ide-ui.
However, you can substitute a pack of typescript, which has the same ancestor as JavaScript (ECMAScript).
The explanation also says that JavaScript can be used.
ECMAScript
A specification for JavaScript; Ecma International determines the coding rules for JavaScript (formulation and recommendation of the specification).
The substantive work is done by TC39, which in turn is recommended by Ecma International. When a recommendation is made, it is given the name "ES20** (age)".
Ecma International is originally a European standards organization for electronic communications, so it doesn't just deal with JavaScript.
ES2015（ES6）
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.
Since ES2015, the specification has been recommended every year, so we stopped using the version number in the official name.
ES6 is a remnant of the old wording. The official documentation says so.
The term ES6 is only allowed because it is a transitional stage of change.
ES2016
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.
ES5
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.
Since it is now easy to transpile JavaScript, it is used as a way to call JavaScript that is compatible with all browsers.
(Transpile is to convert to another version of a JavaScript program.)
ESNext
The next generation of JavaScript specifications. It refers to a specification that has not yet been recommended and is being developed by TC39.
It is often used to refer to ES2015 and later, which are not supported by all browsers.
Since transpiling has become easier, it has become commonplace to program in ESNext, including frameworks such as React, and Node.js plugin development.
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 SPA (Single Page Application).
You can check the specification support status of each browser and its version.
TC39（Technical Committee 39）
The technical committee responsible for developing the ECMAScript specification.
Ecma International has many different TC, so they are numbered.
The ECMAScript specification is 39.
The contents and specifications of the work in progress are available on GitHub for you to check.
The work will be divided into five stages, and Ecma International will make recommendations when all stages are completed.
| Stage 0 | Strawman | What specifications will be introduced? When to start the formulation process? Decide. |
| Stage 1 | Proposal | Create a framework for the specification development process and identify problems. |
| Stage 2 | Draft | Write in JavaScript for real. Set programming rules. The documentation says to be precise, so don't leave anything ambiguous. |
| Stage 3 | Candidate | Open the draft to general developers for feedback. (Trial period) |
| Stage 4 | Finished | The state of being ready to be added to the ECMAScript standard. Indicates that a recommendation can be made at any time. |
Each browser is not waiting for the recommendation to be made, but may introduce it on its own ahead of time. Anyone can check its progress.
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.
It's also a programming language, so you can do definition jumps.
Ctrl + click on variable, function, or constant
"Huh? What was this again?" It's convenient because you can instantly check what you think you're looking for.
Official atom package.
ide-json
https://atom.io/packages/ide-json
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.
json = JavaScript Object Notation
json-ide is a json pack for that atom-ide-ui, and is an official atom package.
You can also jump to this in the outline.
atom-ide-vue
https://github.com/rwatts3/atom-ide-vue
This is an IDE pack for the Vue.js JavaScript framework, and should be included by anyone developing with Vue.js.
This package requires the installation of atom's language-vue package.
https://atom.io/packages/language-vue
IDE Debugger
The atom-IDE has two debuggers for JavaScript frameworks; the IDE was originally developed by Facebook, so it reflects that.
I feel like it's a direct result of what we used to use internally at Facebook.
atom-ide-debugger-node
https://atom.io/packages/atom-ide-debugger-node
This is a debugger for Node.js, a framework that is used by all web developers, not just Facebook.
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.
When using Node.js, install it.
atom-ide-debugger-react-native
https://atom.io/packages/atom-ide-debugger-react-native
This is a debugger for React, a JavaScript framework.
React is one of the most famous frameworks and was developed by Facebook.
Well, of course there is, isn't there? Because the IDE was also developed by Facebook.
React is probably the most popular and most used, so you will have many opportunities to use it.
To be precise, React is a JavaScript package. However, it is often seen as one of the frameworks.
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.
linter and IDE cannot coexist. You have to choose one to use.
It also has many of the same features as the IDE. I can't say that one is better than the other.
Using linter in the main function
First, install the non-IDE package that I wrote earlier.
Based on linter, here are the packages you need for HTML, CSS, and JavaScript.
As I mentioned earlier, the default packages of HTML, CSS, and JavaScript in atom are fully usable.
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.
It is not necessary for those who are familiar with HTML and CSS and can write more and more while researching on the web.
For those of you who haven't gotten to that point yet and want to be a linter, here are some tips.
linter is not useful by itself. You need the respective extension packages.
There is no such thing as a good linter for JavaScript.
linter-htmlhint
https://atom.io/packages/linter-htmlhint
HTML extension package for linter.
linter-sass-lint
https://atom.io/packages/linter-sass-lint
Sass(SCSS) extension package for linter. It performs static code checking.
(LESS is not supported.)
Extra
This package can coexist with both IDE and linter.
It's a bonus, so you can use it as you like.
atom-html-preview
https://atom.io/packages/atom-html-preview
You can open the HTML preview to see the actual page.
Open the HTML source code and press the following key to display the preview screen.
Ctrl + Shift + h
In today's web development, writing HTML directly has become much less common. It's not really necessary to do so.
I also use it, but only to look at simple HTML sample code.
Summary
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.
In this article, I have only introduced the minimum required package.
If you install too many packages, Atom will become sluggish and unusable.
There are also many useful packages available. Be careful not to install too many of them.
One more thing: Atom has a number of packages with similar functionality. Let's choose just one and install it.
