dot-notation doesn't work if backtick is used

[DimitarNestorov]

Tell us about your environment
macOS 10.12.6, VS Code

• ESLint Version: 4.7.2
• Node Version: 8.4.0
• npm Version: 5.3.0

What parser (default, Babel-ESLint, etc.) are you using?
Babel-ESLint

Please show your full configuration:

Configuration

{
	"env": {
		"browser": true,
		"commonjs": true,
		"es6": true,
		"node": false
	},
	"parserOptions": {
		"ecmaVersion": 6,
		"sourceType": "module",
		"ecmaFeatures": {
			"modules": true,
			"jsx": true
		}
	},
	"rules": {
		"no-undef": "error",
		"react/jsx-uses-react": "error",
		"react/jsx-uses-vars": "error",
		"babel/no-undef": "off",
		"no-var": "off",
		"no-use-before-define": "off",
		"curly": "off"
	},
	"plugins": [
		"react",
		"babel"
	],
	"parser": "babel-eslint",
	"extends": "dimitarnestorov/warn"
}

What did you do? Please include the actual source code causing the issue.

const features = {};
features[`time`] = true;

What did you expect to happen?
dot-notation warning

What actually happened? Please include the actual, raw output from ESLint.
No warning

[platinumazure]

Hi @DimitarNestorov, thanks for the report. I can reproduce this issue.

[Benny1007]

beginner here, does dot-notation.js need to test for TemplateLiteral on line 61?

(node.property.type === "Literal" || node.property.type === "TemplateLiteral") &&

[not-an-aardvark]

Hi @Ben-Shirley, thanks for contributing. It looks like that would be a good start for fixing this issue, but I think there are a few cases that would also need to be handled:

• The rule should not report an error for code like this, because the template literal has a placeholder:

  foo[`bar${baz}`];

• When the allowKeywords option is false, the rule should not report an error for code like this:

  foo[`while`];

If I'm reading the existing code correctly, I think modifying only line 61 would cause the rule to report an error in those two cases. It seems like there are a couple of other small checks that need to be added to make sure those cases are handled correctly.

Let me know if I can clarify anything.

[philquinn]

I have a passing PR with a potential fix for this. Any feedback would be welcome

[Benny1007]

Nice work @philquinn this was a great first experience of github for me. I have a couple of questions tho, what is node.property.quasis? My google foo is letting me down. Also what is MemberExpression, I tried looking for a reference but couldn't find one, is it a function created on the fly?

[philquinn]

@Ben-Shirley I'm sure someone else could probably expand on this as its mainly new to myself too.
Both MemberExpression and quasi are different parts of the AST (abstract syntax tree) which is generated by Espree (which is what eslint uses).

TemplateLiteral has a list of quasis which are made up of TemplateElement which make up the full template literal. In the case of the bug here, it will only have one quasi if we want to show the eslint error.
MemberExpression is another part the tree and is made up of an object and property.

For example console.log(``name``) // ignore the double backtick

Above is a MemberExpression with a object of console and property of log and there is TemplateLiteral with a value of name. These make up a CallExpression.

https://astexplorer.net/#/gist/73a678101ff196b50b5e2ef7526ad00b/9f41b299ca1080eea3ce76a7c6741dbe8d8aeb1a is what is generated from the above example.

Espree is based off esprima. These docs are kinda nice but a little light, but it shows all the different expressions. https://esprima.readthedocs.io/en/latest/syntax-tree-format.html#expressions-and-patterns

https://astexplorer.net/ is a pretty good way of visualising the generated AST.

I hope that was some help and not just a brain dump on my side.

[Benny1007]

No that's great, thanks for those links it explained things. For the tests how did you know to use parserOptions: { ecmaVersion: 6 } was that in other tests? - I was getting [undefined] is better written in dot notation and I think it is because it wasn't recognising the Template literal.

[philquinn]

Yeah exactly. To get the template literals to work, it needs to be ES2015 at least. Yep other tests use the parserOptions in a similar way.