How to config SublimeLinter – ESLint for the no-cond-assign rule

Generally I don’t like to write posts about stuff that is already out there on the interwebs and posted by a bazillion other blogs. Why reinvent the wheel when you can do a quick simple search and find what you need. In this case I could not find what I needed with a quick simple search. I had to try something from one post which caused an issue that needed separate research which all-in-all ended up taking longer than I would have liked. So here it is all in one place….

Let’s set the stage

For ESLint and not JSHint –  I read several places on why ESLint is probably better (at least for me) but if your not sure which linter to use feel free to research here and here.

Need to have SublimeLinter and ESLint installed – This post is not a tutorial on how to install these tools. Please go here or here for detailed instructions on how to install them.

Problem I was trying to solve –  In my code, I kept getting an error ‘Expected a conditional expression and instead saw an assignment. (no-cond-assign)’.

Now I completely understand that in general it is not a good idea to perform a variable assignment within a conditional however there are some very good reasons why you would want to do this. I also understand the need for this rule as in conditional statements it is very easy to mistype an assignment operator (=) instead of a comparison operator (== or ===). Since in this case I didn’t want to write extraneous code or “bad code” just to satisfy the linter so there are the steps I took.

Configuring ESLint


1. Make sure you have an ELint config file

ESLint uses configuration files either in JavaScript, JSON or YAML to specify the rules for the directory and all of its subdirectories. My files is simply called eslintrc.json and is located in my main Code\JavaScript directory in which I put all of my test JS code.

If you do not already have a ESLint config file and you installed ESLing globally then you can create one by going to the directory where you will code typing:

eslint --init

If you installed ESLint locally then use:

./node_modules/.bin/eslint --init

You will then a menu of options (directly in command prompt or terminal) where the eslint init will ask you if you want to answer perform setup by answering questions, using a popular style guide or by looking at your js files.

2. Add the no-cond-assign rule to your config file

Open up the config file. You will see some rules already in the file. If you are curious and want to become an ESLint expert you can read about all of the different types of rules and settings for ESLint here.

Go to section titled “rules” and add the following rule:

"no-cond-assign": [2, "except-parens"]

This rule allows you to customize the default settings which disallows assignment operators in conditional statements. The (number) 2 tells ESLint to show an error. The (number) 1 would tell it to warn you and the (number) 0 would turn it off. Please don’t type (number) along with the number. The except-parens  allows you to put an assignment in test conditions only if they are enclosed in additional parentheses.

So now you are able to do this:

while ( (results = regex.exec(str)) ) {

but not this:

while ( results = regex.exec(str) ) {
New Problem! Gratuitous parentheses around expression

So after addition the no-cond-assign rule we no longer get the error saying we can’t do an assignemnt in a conditionl BUT we now get a “warning” saying that we take too many unnecessary parenthesis!. Man we just can’t win! I am assuming that like me you don’t want to see any type of messages when you perform an assignment in a conditional (for this specific scenario only). So in order to handle these warning messages more appropriately we have to add another rule.


3. Add the no-extra-parens rule to your config file

In order to solve this problem add the following rule

 "no-extra-parens": [1, "all", {"conditionalAssign": false, "returnAssign": false, "nestedBinaryExpressions": false}

The 1 indicates that if there are extra parentheses then show a warning rather than an error. The all is the default and tells it to show a warning around any  expression. Since we want to see warnings around any expression we need to add some exceptions to the rule.

The conditionalAssign exception is the main one we needed here. It allows extra parentheses around assignments in conditional expressions!

The returnAssign allows extra parenthese around assignments in return statements. I put this here because often times I like to evaluate an expression (i.e. return (x>y) || (x===50) and don’t want a warning in these cases.

Lastly, the nestedBinaryExpressions allows extra parenthese in nested binary expressions.

….and that should just about do it! Once you add the no-cond-assign rule and the no-extra-parens rule with exeptions you should be able to do an assignment within a conditional. Below is my current (as of 12/20/2016) ESLint JSON config file.

 "env": {
 "browser": true,
 "es6": true,
 "node": true
 "extends": "eslint:recommended",
 "parserOptions": {
 "sourceType": "module"
 "rules": {
 "indent": [
 "linebreak-style": [
 "quotes": [
 "semi": [
 "no-warning-comments": [ 1, {"terms": ["todo"], "location": "anywhere"} ],
 "no-console": 1,
 "no-extra-parens": 1,
 "keyword-spacing": [ 1, {"after": true} ],
 "space-before-blocks": [ 1, "always" ],
 "no-cond-assign": [2, "except-parens"],
 "no-extra-parens": [1, "all", {"conditionalAssign": false, "returnAssign": false, "nestedBinaryExpressions": false} ]


Leave a Reply

Your email address will not be published. Required fields are marked *