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.
- Use an IDE (Integrated Development Environment)
- IDE Debugger
- Using linter in the main function
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.
(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.
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.
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.
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)".
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.
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.
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?
|Stage 1||Proposal||Create a framework for the specification development process and identify problems.|
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.|
|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.
Reference: TC39 official documentation
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.
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.
This package requires the installation of atom's language-vue package.
I feel like it's a direct result of what we used to use internally at Facebook.
This is a debugger for Node.js, a framework that is used by all web developers, not just Facebook.
When using Node.js, install it.
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.
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.
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.
HTML extension package for linter.
Sass(SCSS) extension package for linter. It performs static code checking.
(LESS is not supported.)
This package can coexist with both IDE and linter.
It's a bonus, so you can use it as you like.
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.
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.