Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

7. Configure ESLint and EditorConfig files #125

Closed
filipedeschamps opened this issue Feb 23, 2016 · 1 comment
Closed

7. Configure ESLint and EditorConfig files #125

filipedeschamps opened this issue Feb 23, 2016 · 1 comment
Labels

Comments

@filipedeschamps
Copy link
Owner

Ready to create some files? Good!

These two ones will help you with code standards. They're not necessary at all to make your module work, but if you wish your code all looking the same, specially if you plan to receive contributions, this is a must have.

Keep in mind that the default location of your configuration files is in the root of your module.

EditorConfig

This has to be the first one, since it will define if your code will use tabs or spaces and how many of them. Is a really simple file called .editorconfig and you need to make your text editor load it, and this is very easy, just google something like "sublime text editorconfig" or "vim editorconfig".

Once it's loaded, your text editor will change it's internals to respect the configuration inside .editorconfig file but only when your editor finds this file. This gives you the opportunity to have a specific configuration for every project.

Some of the main configurations are:

  • indent_style
    This can be set to space or tab
  • indent_size
    If indent_style is set to space, you can specify how many spaces it will use for every indentation.
  • trim_trailing_whitespace
    This will remove all unnecessary spaces in the end of sentences.
  • charset
    Choose a default encoding to write your files, like utf-8.

If you wish, you can take a look and copy the final .editorconfig file of this module.

More informations about EditorConfig: http://editorconfig.org/

ESLint

Code style is a very controversial topic, since it's a mix of personal taste and user experience. ESLint can help you to enforce code style, but it goes further and helps you with good practices.

You can configure ESLint the same way you did with EditorConfig, so basically you will need to create a .eslintrc configuration file and make your text editor load it to give you realtime feedback of style warnings and errors. Also, you can run ESLint binary against your files to see the results in your terminal.

So, you can write .eslintrc file in JSON format, like this:

{
  "env": {
    "node": true,  // Tells ESLint our module is running inside a Node.js environment
    "es6": true    // and it's using ES6 syntax
  },
  "rules": {
    "no-eval": 1,  // returns a warning when `eval` function is used
    "quotes": [2, "single"],  // returns error when double quotes is used
    "semi": [2, "always"],  // returns error when you forget a semicolon
    "sort-vars": 0  // does not care if your variables aren't ordered alphabetically
  }
}

So notice you can disable a rule with number 0, return a warning with 1 and error with 2. Choose to return errors when you want your CI to break if it find something like this. Neat, right?

Again, you can take a look and copy the final .eslintrc file of this module. Keep in mind this is the final .eslintrc and it has external dependencies to work like the Babel transpiler, but we will get there.

More informations about ESLint: http://eslint.org/

Next step

8. Create the skeleton of the public interface

@javajosh
Copy link

Hi Filipe,

I read through your tutorial, but I didn't see where eslint is executed against the project - I would imagine this to be a pre- or post-commit hook? And probably should also have a script in package.json.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants