What On Earth Is Filename Linting?

In this tutorial, you will learn how to add a linter to your project that will lint the directory and filenames within an NPM based project. As the old Phil Karlton quote goes 'There are only two hard things in Computer Science: cache invalidation and naming things'. Any tool that can help improve the naming conventions within your project will increase the quality of your work. Most people will know of ESLint and Prettify as tools that can help improve code quality, however, from my experience, fewer developers are familiar with filename linting. Enter ls-lint. Ls-lint is a free filename linter that is easy to install and easy to configure. Adding this package to your project will ensure that all the filenames and directory names within your project are structured the way that you would like them to be 😍. Ls-lint allows you to define rules. These rules can make sure that your component names start with a capital letter, or your utils start with a lowercase letter, or your directories all use camel case.. the choice is yours 🤔

Having good naming standards is one of the most important steps towards ensuring a project has good code quality. When working within a team, despite best efforts, people make mistakes. When deadlines loom and the client starts shouting, it is easy for you or your team members to forget to use proper conventions. This is why linters are important. It forces good positive code quality habits into your everyday life. 📈📈📈. If I have sold you on the idea and you want to be a coding legend, I will now show you how to install and configure ls-lint so you can get all these wonderful benefits on your project 😍

'# How To Install Ls-Lint

First, you will need to install the package. Assuming you use npm, in your terminal type (if you don't go here to find the other ways of installing it):

Next, within package.json, add this lint command into the script section:

This version assumes that you use Windows. On a MAC you can just call ls-lint directly! Now, create a new file in your projects root directory called, .ls-lint.yml. This is where you will add the ls-lint configuration. An example of how this file can be structured is shown below:

Let us walk through this configuration. The first section is called ls, in here you add rules. You can configure ls-lint on a filename extension basis. Defining the extension is easy, you add the filename and then tell ls-lint which rule to lint against. For the rules, you have options of either a regex, kebeb-case, PascalCase, camelCase, point.case, or snake_case. You can also define an ignore section. You should always add your .git folder and node_modules in here. If you have other folders that you do not want to lint, like your build output directory, add this in as well 😉

I have found that after installing this plug-in the filename naming convention dramatically improves. This tool will force developers to think about naming more, which can only be a good thing. On your project, you should add the lint script within your build script so that your files are listed on every build. To test the linter using the script defined above, just type the following command into a terminal:

If you want to learn more about ls-lints configuration options, I suggest you read the developer documentation here. If you want to see my sample application, you can clone the repo here. Happy Coding 🤘