This tutorial shows how to use the linting technique to improve the quality of your JavaScript code. We will talk about what it is, how it is helpful and how it can be applied for lens development.
Linting is a technique that analyzes your code and points to some errors or potential bugs if found. It also keeps code style in accordance with best practices and guidelines depending on the programming language you use.
Tip: If you’re learning to script with Lens Studio, this guide is great as it teaches you about common JavaScript coding practices that you can use outside of Lens Studio. If you’ve worked with JavaScript before, you can download this custom ESLint configuration and skip to the usage section!
There is a helpful introduction to linting in Wikipedia. In very simple words linting helps you to find potential bugs in your code and avoid common and obvious omissions. This guide is focused on applying linter to a Lens code, which means it is not a comprehensive and self sufficient guide for the linting technique as such.
Installing requirements
Since Lens Studio uses JavaScript, we’ll use common JavaScript based tools to help us with our linting process. We’ll get two things:
- Node: a way to run JavaScript on your computer. It comes with NPM, which allows you to install different packages to be used with node
- ESLint: A javascript package which will do the linting for you
Tip: If you’ve already worked with web development, and Node, you can skip this section.
We will be using ESLint in this tutorial. To do so, we need to install Node.js and the npm CLI tool. Please read carefully and follow these instructions to do it.
Once you have it installed, you should be able to run these commands to test if everything is installed properly:
$ node -v
v10.16.2
$ npm -v
6.13.7
Tip: Lines starting with `$` is commonly used to denote that it’s a command line command to be run in Terminal
If you see Node and npm versions printed in your console you’ve successfully installed a JavaScript run time! . Next, let’s install the tool by running the following command:
$ npm install eslint -g
Please see more information on how to install packages using npm. The one thing to mention here is that -g flag, which tells npm to install a package globally. Normally, you would not change ESLint configuration working with different lenses as they follow the same code checking rules. So it makes sense to install ESLint globally, set it up once and use it for any Lens.
Defining the Linting Rules
Linting requires a set of rules, using which it analyses the source code and makes its own fixes. All the preferences and linting rules are defined in the configuration file. For more details about it please refer to the documentation.
We will skip detailed overview of the configuration file and use the one created specifically for Lens development with all the global variables and periodically added new API features in it.
Download this file and save it to your home directory as .eslintrc and you are good to go to apply linting with all the rules set for you.
Making a project
Now, we have everything we need to Lint our script, let’s make a Lens Studio project with a simple script, which sets the world position of an object to One vector (1, 1, 1).
var position
function setPosition() {
script.getSceneObject().getTransform().setWorldPosition(vec3.one())
}
There are no critical errors in this script, but if you want your code to be reliable and in accordance with high standards, linting is here to help and will show that this script indeed has several omissions.
Let’s save the project and lint our script in the next chapter!
Using the Linter
First we’ll go to the root of the project in the terminal since we want to lint only our project. It can be done by this command:
$ cd path/to/your/ls_project_root
Linter usage can be done with a single command:
$ eslint .
This command will run the ESLint tool in the current folder (the single dot at the end of the command is telling it to the tool).
Note: You can run ESLint by giving it a specific folder or a file: eslint path/to/project. See documentation for ESLint for more details. Running this command gives the following report:
C:\Users\Desktop\linter\Public\Script.js
1:5 error 'position' is defined but never used no-unused-vars
1:13 error Missing semicolon semi
3:10 error 'setPosition' is defined but never used no-unused-vars
4:40 error Missing semicolon semi
5:72 error Missing semicolon semi
✖ 5 problems (5 errors, 0 warnings)
3 errors and 0 warnings potentially fixable with the `--fix` option.
Working and generally speaking that is all! We just applied the linting technique to our source code and we got the result showing what the errors we made and some description of what is wrong.
Let’s fix these errors and make the script work properly. The report shows 5 problems. The first and the third say that no unused variables (and functions) are allowed, we can fix it immediately. I will add the function call and I will use the position variable in it:
var position = vec3.one()
function setPosition() {
print("Setting position...")
script.getSceneObject().getTransform().setWorldPosition(position)
}
setPosition()
We can run the linter again to see if we have solved the problem. Doing so gives as the report:
$ eslint .
C:\Users\Desktop\linter\Public\Script.js
1:26 error Missing semicolon semi
4:40 error Missing semicolon semi
5:70 error Missing semicolon semi
8:14 error Missing semicolon semi
✖ 4 problems (4 errors, 0 warnings)
4 errors and 0 warnings potentially fixable with the `--fix` option.
The two initial problems are solved now, but there are still some errors. Not a big deal! Let’s see how we can fix them in the next chapter.
Automatic Fixing
Automatic fixing tells for itself: it can fix some problems automatically for you. When you run the eslint command it gives you results something like this:
$ eslint .
C:\Users\Desktop\linter\Public\Script.js
1:26 error Missing semicolon semi
4:40 error Missing semicolon semi
5:70 error Missing semicolon semi
8:14 error Missing semicolon semi
✖ 4 problems (4 errors, 0 warnings)
4 errors and 0 warnings potentially fixable with the `--fix` option.
See this --fix option in the last line? That is the trick! As you might guess, I am going to apply this option to fix the minor semicolon issue:
$ eslint . --fix
And now we finally do not have any errors and we can see that the semicolons have been added to the file by the linter. Check it out and see if the script works well in Lens Studio.
Conclusion
Linting in general is a handy practice to catch obvious and not so obvious errors, prettify code style, point to potential bugs and fix some problems automatically. And now you know how to apply it to make sure your lenses are of highest quality!
Get to know it more at the official page for ESLint, take a look at customizing the linting rules to make sure it fits your preferences and needs.
Linting becomes even more important when you work on larger Lenses and in teams, as it makes sure your code is consistent, and helps clarify your code when your friends take a look. Next time we’ll explore how we can use other common JavaScript tools to help you organize when making more complicated Lenses!
