Asked by Jolie Avila
on 2021-12-16
Answer by Kelly Cruz
«Parsing error: Missing semicolon».,This error is showing on componentDidMount() line.,SyntaxError: clientsrcApp.js: Missing semicolon (15:21)
Import useEffect:
import { useEffect } from "react";
… and replace:
componentDidMount() {
store.dispatch(loadUser());
}
with:
useEffect(() => {
store.dispatch(loadUser());
}, []);
Answer by Xiomara Zuniga
multidimensional-array
,
React componentDidMount «Parsing error: Missing semicolon»
,
React componentDidMount «Parsing error: Missing semicolon»
Answer by Vihaan Cross
Answer by Thalia Cantu
[SOLVED] Hi, I am trying to GET from a JSON based REST API but in my super constructor it says there’s a missing semicolon but there’s not meant to be one there as far as i know, my code is,You can only use constructor() in class components (i.e. those declared with the class keyword). Written as a class component, your component might look something like this:,In this case, useState is used for state (instead of this.state/this.setState used in a class component), and useEffect is used for code that should only run when the component is created (instead of constructor used in a class component).
[SOLVED] Hi, I am trying to GET from a JSON based REST API but in my super constructor it says there’s a missing semicolon but there’s not meant to be one there as far as i know, my code is
constructor(props) {
super(props);
this.state = { data: [] };
}
axios.get('https:/reqres.in/api/users?page=2').then(res => {
this.setState({
data: res.data;
});
});
Related
I have this simple line of code:
const target = e.target as HTMLLIElement;
and I am getting this error:
Line 18:28: Parsing error: Missing semicolon
> 18 | const target = e.target as HTMLLIElement;
| ^
I’ve looked at dozens of different posts that are similar to my issue but none of them match up just right to my problem or they have solutions that don’t really pertain to my project. For example, some have run into eslint issues, but I don’t have the eslint package installed. Here is my package.json file:
{
"name": "ally-autobot",
"version": "0.1.0",
"private": true,
"dependencies": {
"@craco/craco": "^6.1.1",
"@reduxjs/toolkit": "^1.5.1",
"@tailwindcss/postcss7-compat": "^2.1.0",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"@types/jest": "^24.0.0",
"@types/lodash": "^4.14.168",
"@types/node": "^12.0.0",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
"@types/react-redux": "^7.1.7",
"@types/react-router-dom": "^5.1.7",
"autoprefixer": "^9",
"firebase": "^8.4.2",
"firebase-tools": "^9.10.0",
"lint": "^0.7.0",
"lodash-core": "^4.17.19",
"postcss": "^7",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-firebase-hooks": "^3.0.4",
"react-redux": "^7.2.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"redux-persist": "^6.0.0",
"source-map-loader": "^2.0.1",
"tailwindcss": "npm:@tailwindcss/postcss7-compat",
"typescript": "~4.1.5"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
And here is my tsconfig.json file:
{
"compilerOptions": {
"sourceMap": true,
"incremental": true,
"target": "es5",
"module": "esnext",
"strict": true,
"noImplicitAny": true,
"strictNullChecks": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"allowSyntheticDefaultImports": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": [
"src"
]
}
I’ve also tried using the angle bracket approach but that doesn’t work because I’m in a tsx file. I’ve tried setting the noImplicitAny to false. I’ve tried adding semicolons to all expressions in the same file as this error.
Any thoughts on how to resolve this issue?
Cover image from peforce.com
I decided to write this article to sum up a struggle of mine. We’ve started a new project in the company, Prettier was set up, ESLint was set up and at some point, we added Typescript. By the end, Typescript was also set up. CI was linting, commit hooks were also linting, VSCode was fixing the code, and so on (that is what I thought).
At some point I was playing with the project and realized that some files were being warned by my editor but not when running the linter (npm run lint in my case). I got triggered. I have a hard time accepting that something works but I can’t understand unless it is an external tool that I didn’t have to set up myself but that was not the case here.
In this article, I will summarize some understandings that I’ve about integrating all the tools above. The main focus is how to set up Prettier, how to set up ESLint, how to integrate both, and by the end how to add Typescript to it.
Prettier
The first tool I want to explore is Prettier. I would leave it to you to read more about what it is but, in short, it is a code formatter. What does it mean? It means that it will keep your codebase consistent (in terms of coding style). Do you use ;? If yes, it will ensure that all your files have it, for example. I like it for two reasons: we barely have to discuss code formatting and it is easy to onboard new members to the team.
At the time of this writing, Prettier is in version 2.4.1, so keep in mind things might change (especially formatting) in future versions.
How to set up Prettier?
I will consider you have a project set up already so in short, you need to install it:
npm i prettier #--save-dev and --save-exact are recommended
Enter fullscreen mode
Exit fullscreen mode
Right now you can start using Prettier. You don’t need any configuration (if you don’t want it). You can run it against your codebase with:
npx prettier .
Enter fullscreen mode
Exit fullscreen mode
The . at the end means to run across your whole codebase. You can run for a specific file or pattern if you want.
This command will print the files formatted, nothing special. A more useful command happens when you add --write flag. Instead of printing the formatted code, it will write to the origin file.
Let’s create a file called index.js with the following code:
// index.js
const a = 1
Enter fullscreen mode
Exit fullscreen mode
If we run npx prettier index.js, the output will be:
const a = 1;
Enter fullscreen mode
Exit fullscreen mode
It automatically adds the ; for us but it is not saved in the file. If we run npx prettier index.js --write though, the file will change and the ; will be added to it.
Cool, that is the simplest setup we can have with Prettier. The default rules are documented on their website and can be customized (a bit). We will take a look into it next but before I want to mention another flag: --check.
The --check flag, npx prettier index.js --check, is useful if you just want to check if a file (or the codebase with .) is Prettier compliant. It is useful for CIs and git hooks, for example, if you just want to warn the user (you can also enable --write in these scenarios).
If we consider the following code again:
// index.js
const a = 1
Enter fullscreen mode
Exit fullscreen mode
And run npx prettier index.js --check, we get the following output:
Checking formatting...
[warn] index.js
[warn] Code style issues found in the above file(s). Forgot to run Prettier?
Enter fullscreen mode
Exit fullscreen mode
Prettier configuration
You can configure Prettier to some extend. You can do it via the CLI or via a configuration file, which is more adequate. The configuration file could be in a variety of formats so you can choose the one that fits you best.
Add the configuration file to the root of your project (you can have configurations/folder but I would leave it up to you to explore this path) and start adding rules to it:
// .prettierrc
{
"semi": false
}
Enter fullscreen mode
Exit fullscreen mode
With this configuration file and the following code, again, the --check run will succeed:
// index.js
const a = 1
Enter fullscreen mode
Exit fullscreen mode
npx prettier index.js --check:
Checking formatting...
All matched files use Prettier code style!
Enter fullscreen mode
Exit fullscreen mode
On top of that, you can also extend configuration and set up a few other things. Check their configuration documentation for more details.
ESLint
ESLint has been around for a while. In short, it does a bit more than Prettier as it analyzes your code to find problems (or patterns that you don’t want, like variables that are not used should be removed). Again, I invite you to read ESLint documentation if you want to go deeper into the topic. I like ESLint for the simple reason it helps me to find problems and configure some patterns in the project (it might be useful when onboarding new people). It is extremely extensible as well in case you’re interested.
At the time of this writing, ESLint is in version 7.32.0, so keep in mind things might change (especially formatting) in future versions. Version 8 is in beta at the moment.
How to set up ESLint?
In short, quite similar to Prettier but you need the configuration file. I will consider you have a project set up already so, in short, you need to install it:
npm i eslint #--save-dev is recommended
Enter fullscreen mode
Exit fullscreen mode
You need a configuration file. You can create one by yourself or you can run the command below that bootstraps one for you (it can add a lot of presets already):
npx eslint --init
Enter fullscreen mode
Exit fullscreen mode
Let’s start with an empty configuration file though, it is enough to run ESLint:
// .eslintrc.js
module.exports = {
};
Enter fullscreen mode
Exit fullscreen mode
We can now run it, similar to Prettier:
npx eslint .
Enter fullscreen mode
Exit fullscreen mode
One thing to note here: ESLint runs only on .js files (by default).
Let’s consider the same example as before:
// index.js
const a = 1
Enter fullscreen mode
Exit fullscreen mode
npx eslint index.js and we get:
1:1 error Parsing error: The keyword 'const' is reserved
✖ 1 problem (1 error, 0 warnings)
Enter fullscreen mode
Exit fullscreen mode
This is simply the issue with a default ESLint configuration. It considers ES5 by default, so const is not allowed yet, and some older setup might make sense to your project but not in general.
We can spend hours configuring ESLint but in general, we get a default from a style guide (AirBnB for example) and apply it to our project. If you use the init command you can do so.
Let’s install Airbnb ESLint configuration, it also requires eslint-plugin-import to be installed (following their documentation) so:
npm i eslint-config-airbnb-base eslint-plugin-import # --save-dev is recommended
Enter fullscreen mode
Exit fullscreen mode
Then we extend it in our configuration, so it will look like:
module.exports = {
extends: [
'eslint-config-airbnb-base', // or `airbnb-base`, you can omit `eslint-config-`
]
};
Enter fullscreen mode
Exit fullscreen mode
Running npx eslint index.js again we get:
1:7 error 'a' is assigned a value but never used no-unused-vars
1:12 error Missing semicolon semi
✖ 2 problems (2 errors, 0 warnings)
1 error and 0 warnings potentially fixable with the `--fix` option.
Enter fullscreen mode
Exit fullscreen mode
Cool! Now we get errors defined by the AirBnB guide. We can use the --fix option, which works similar to --write from Prettier, in case we want to fix the errors when possible.
ESLint allows you to extensively configure it if you want. It goes beyond the scope here and I will leave it up to you to explore and play with it: https://eslint.org/docs/user-guide/configuring/
Prettier + ESLint
There are a lot of tutorials online on how to connect both. I want to take a different approach and try to reason about each tool and how they connect.
I will assume that we have the following Prettier configuration:
// .prettierrc
{
"semi": false
}
Enter fullscreen mode
Exit fullscreen mode
I will assume that we have the following ESLint configuration:
// .eslintrc.js
module.exports = {
extends: [
'eslint-config-airbnb-base',
]
};
Enter fullscreen mode
Exit fullscreen mode
I will assume the following script to run both tools:
// index.js
const a = 1
module.exports = { a }
Enter fullscreen mode
Exit fullscreen mode
If we run Prettier check, we get:
Checking formatting...
All matched files use Prettier code style!
Enter fullscreen mode
Exit fullscreen mode
Cool! If we run ESLint, we get:
1:12 error Missing semicolon semi
3:23 error Missing semicolon semi
✖ 2 problems (2 errors, 0 warnings)
2 errors and 0 warnings potentially fixable with the `--fix` option.
Enter fullscreen mode
Exit fullscreen mode
Not so cool! Running ESLint with --fix will fix these issues. Now if we run Prettier again we get:
Checking formatting...
[warn] index.js
[warn] Code style issues found in the above file(s). Forgot to run Prettier?
Enter fullscreen mode
Exit fullscreen mode
If we run Prettier with --write it will fix but then ESLint will fail again. It will be like this forever. If the goal were just formatting, I would say pick one of the tools and ignore the other, but we want the power of both tools, especially as ESLint is more than just formatting your code.
Prettier provides two packages that integrate with ESLint.
-
eslint-config-prettier: turns off rules that might conflict with Prettier. -
eslint-plugin-prettier: adds Prettier rules to ESLint.
Let’s go step by step. First let’s go and install eslint-config-prettier:
npm i eslint-config-prettier # --save-dev recommended
Enter fullscreen mode
Exit fullscreen mode
Our new .eslintrc.js will look like:
module.exports = {
extends: [
'eslint-config-airbnb-base',
'eslint-config-prettier',
]
};
Enter fullscreen mode
Exit fullscreen mode
Considering the file below, again:
const a = 1
module.exports = { a }
Enter fullscreen mode
Exit fullscreen mode
It was a valid file for Prettier but invalid for ESLint. Using the new configuration, it becomes valid as the conflicting rule semi has been disabled.
It is fine if we want to ignore the rules from Prettier but in general, we want Prettier rules to override ESLint rules.
In case we delete the Prettier configuration file and use its defaults (which requires ;), running Prettier check will result in:
Checking formatting...
[warn] index.js
[warn] Code style issues found in the above file(s). Forgot to run Prettier?
Enter fullscreen mode
Exit fullscreen mode
The file is not valid anymore as it is missing the ; but the ESLint run won’t fail, as the Prettier rules have been disabled when running ESLint.
One important thing to note here: the order used by extends, in the ESLint configuration, matters. If we use the following order we will get an error as AirBnB rules will override Prettier disabled rules when running ESLint:
module.exports = {
extends: [
'eslint-config-prettier',
'eslint-config-airbnb-base',
]
};
Enter fullscreen mode
Exit fullscreen mode
Running npx eslint index.js:
1:12 error Missing semicolon semi
3:23 error Missing semicolon semi
✖ 2 problems (2 errors, 0 warnings)
2 errors and 0 warnings potentially fixable with the `--fix` option.
Enter fullscreen mode
Exit fullscreen mode
To mitigate this issue let’s install the plugin:
npm i eslint-plugin-prettier # --save-dev recommended
Enter fullscreen mode
Exit fullscreen mode
We can then update our .eslintrc.js file to:
module.exports = {
extends: [
'eslint-config-airbnb-base',
'plugin:prettier/recommended',
]
};
Enter fullscreen mode
Exit fullscreen mode
We replaced eslint-config-prettier with plugin:prettier/recommended. Check ESLint docs about extending a plugin: https://eslint.org/docs/user-guide/configuring/configuration-files#using-a-configuration-from-a-plugin
I also recommend you to check what eslint-plugin-prettier is doing with our ESLint configuration: https://github.com/prettier/eslint-plugin-prettier/blob/a3d6a2259cbda7b2b4a843b6d641b298f03de5ad/eslint-plugin-prettier.js#L66-L75
Running ESLint again we will get:
1:12 error Insert `;` prettier/prettier
3:23 error Insert `;` prettier/prettier
✖ 2 problems (2 errors, 0 warnings)
2 errors and 0 warnings potentially fixable with the `--fix` option.
Enter fullscreen mode
Exit fullscreen mode
Two things to note here:
- We are getting
;errors again, that have been disabled earlier witheslint-config-prettier; - The error is coming from the rule
prettier/prettier, which is added by the plugin. All prettier validations will be reported asprettier/prettierrules.
Typescript
Let’s start from the very basic: running ESLint against TS files.
Right now, running ESLint against your codebase would be npx eslint .. That is fine until you want to run it against files that are not ending with .js.
Let’s have these two files in our code base:
// index.js
const a = 1
Enter fullscreen mode
Exit fullscreen mode
// index.ts
const a = 1
Enter fullscreen mode
Exit fullscreen mode
Running npx eslint . we get:
1:7 error 'a' is assigned a value but never used no-unused-vars
1:12 error Insert `;` prettier/prettier
✖ 2 problems (2 errors, 0 warnings)
1 error and 0 warnings potentially fixable with the `--fix` option.
Enter fullscreen mode
Exit fullscreen mode
It runs against our JS file but not our TS file. To run against TS files you need to add --ext .js,.ts to the ESLint command. By default, ESLint will only check for .js files.
Running npx eslint . --ext .js,.ts
/index.js
1:7 error 'a' is assigned a value but never used no-unused-vars
1:12 error Insert `;` prettier/prettier
/index.ts
1:7 error 'a' is assigned a value but never used no-unused-vars
1:12 error Insert `;` prettier/prettier
✖ 4 problems (4 errors, 0 warnings)
2 errors and 0 warnings potentially fixable with the `--fix` option.
Enter fullscreen mode
Exit fullscreen mode
Working like a charm so far. Let’s add some real TS code and run it again. The TS file will look like this:
const a: number = 1
Enter fullscreen mode
Exit fullscreen mode
Running ESLint only against the .ts file:
1:8 error Parsing error: Unexpected token :
✖ 1 problem (1 error, 0 warnings)
Enter fullscreen mode
Exit fullscreen mode
ESLint doesn’t know, by default, how to parse Typescript files. It is a similar problem we faced when running ESLint for the first time with ES5 defaults.
ESLint has a configuration in which you can specify the parser you want to use. There is also a package, as you could imagine, that handles this parsing for us. It is called @typescript-eslint/parser.
Let’s install it:
npm i @typescript-eslint/parser # --save-dev recommended
Enter fullscreen mode
Exit fullscreen mode
Now let’s configure ESLint to use the new parser:
module.exports = {
parser: "@typescript-eslint/parser",
extends: [
'eslint-config-airbnb-base',
'plugin:prettier/recommended',
]
};
Enter fullscreen mode
Exit fullscreen mode
Running ESLint again (npx eslint index.ts):
1:7 error 'a' is assigned a value but never used no-unused-vars
1:20 error Insert `;` prettier/prettier
✖ 2 problems (2 errors, 0 warnings)
1 error and 0 warnings potentially fixable with the `--fix` option.
Enter fullscreen mode
Exit fullscreen mode
Cool! Now we can run ESLint on TS files. Nonetheless, we don’t have any rules being used so we need to configure or use some styleguide, like the one we used by AirBnB before.
There is @typescript-eslint/eslint-plugin that offers us some defaults. Let’s go with it for now:
npm i @typescript-eslint/eslint-plugin # --save-dev recommended
Enter fullscreen mode
Exit fullscreen mode
Adding it to our configuration:
module.exports = {
parser: "@typescript-eslint/parser",
extends: [
'eslint-config-airbnb-base',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended',
]
};
Enter fullscreen mode
Exit fullscreen mode
Now running npx eslint index.ts:
1:7 error Type number trivially inferred from a number literal, remove type annotation @typescript-eslint/no-inferrable-types
1:7 warning 'a' is assigned a value but never used @typescript-eslint/no-unused-vars
1:20 error Insert `;` prettier/prettier
✖ 3 problems (2 errors, 1 warning)
2 errors and 0 warnings potentially fixable with the `--fix` option.
Enter fullscreen mode
Exit fullscreen mode
Cool! Now we have also proper linting in our Typescript file. We can also see that the Prettier rule still applies as expected.
Bear in mind that typescript-eslint is overriding eslint-config-airbnb-base in this case. It means that some rules won’t work in TS files that are still valid on JS files. Let’s have the files below to see it in action:
// index.js and index.ts
const a = 1;
a = 2;
Enter fullscreen mode
Exit fullscreen mode
Both files are identical. Running npx eslint . --ext .js,.ts we get:
/index.js
2:1 error 'a' is constant no-const-assign
2:1 warning 'a' is assigned a value but never used @typescript-eslint/no-unused-vars
/index.ts
2:1 warning 'a' is assigned a value but never used @typescript-eslint/no-unused-vars
✖ 3 problems (1 error, 2 warnings)
Enter fullscreen mode
Exit fullscreen mode
The no-const-assign rule is overwritten by typescript-eslint for .ts files so we don’t get the same error for both files.
To overcome it, we need to change the order of the extended configurations, typescript-eslint comes first and eslint-config-airbnb-base next. If we do so:
module.exports = {
parser: "@typescript-eslint/parser",
extends: [
"plugin:@typescript-eslint/recommended",
"eslint-config-airbnb-base",
"plugin:prettier/recommended"
]
};
Enter fullscreen mode
Exit fullscreen mode
Running npx eslint . --ext .js,.ts:
/index.js
2:1 error 'a' is constant no-const-assign
2:1 error 'a' is assigned a value but never used no-unused-vars
2:1 warning 'a' is assigned a value but never used @typescript-eslint/no-unused-vars
/index.ts
2:1 error 'a' is constant no-const-assign
2:1 error 'a' is assigned a value but never used no-unused-vars
2:1 warning 'a' is assigned a value but never used @typescript-eslint/no-unused-vars
✖ 6 problems (4 errors, 2 warnings)
Enter fullscreen mode
Exit fullscreen mode
Cool! Now we get the same error for both files.
One side note: In this example, I have a codebase with JS/TS, it might not be your case and you might also use another style guide where conflicts won’t happen.
That’s all folks!
I hope this article helped you to learn or clarify some concepts behind ESLint, Prettier, and Typescript playing together.
In short, you’ve to understand which files ESLint will analyze and the order of the configurations you want. Image adding now this into a Vue project, for example, you need to add .vue to --ext .js,.ts,.vue and add (or configure) some style guide which will add some rules to your project.
Most boilerplates will already have some lint set up and you will mostly disable some rules but in case you want to customize it or update packages (especially major bumps), it is important to understand how to perform the changes and the impacts it might have in your project.
That’s is all! Happy linting!
Ekaterina Lopatina
Коллеги, день добрый. Код правильный, тест проходит. Но выводит другие ошибки.
// removed
Вот такие ошибки выводит
status: finished → Check your code. Linter failed.
/usr/src/app/babel.config.js
3:6 error Strings must use singlequote quotes
9:2 error Missing semicolon semi
10:1 error Too many blank lines at the end of file. Max of 0 allowed no-multiple-empty-lines
В чем проблем, помогите разобраться, пожалуйста
4
0
User 34bd397d50137a0f
Проблема, на мой взгляд начинающего программиста, заключается в том, что при использовании больше одного if, последующая конструкция if должна превратится в else if. То есть перед вторым и третьим if следует прописать слово else.
UPD Оказывается (посмотрел решение учителя), что и не нужно тут else if’ов :-). Тогда, что можно сказать, каждый if с новой строки начинать, а не продолжать после } (я так понимаю, ругается на плохую читаемость кода, что if’ы на одном уровне, а то, что выполняется должно быть на другом уровне; а получилось, что второй и третий if заняли места их же return’ов) И удалить пустую строку перед export.
0
Сергей К.
Екатерина, здравствуйте! Это отчёт работы линтера с описаниями стилистических ошибок. Их также нужно всегда исправлять. Давайте разберём, как работать с замечаниями линтера на примере простой ошибки: 9:2 error Missing semicolon semi.
9:2— строка и позиция, где по мнению линтера произошла ошибка;Missing semicolon— описание ошибкиsemi— название ошибки
Переведите и проанализируйте описание. При необходимости загуглите по названию ошибки semi eslint и почитайте документацию с примерами. Исправьте ошибку и запустите повторную проверку линтера.
0
Ekaterina Lopatina
Я понимаю, что это нужно исправлять. Однако, я не понимаю что именно здесь нужно исправлять, ибо:
- 3:6 error Strings must use singlequote quotes
здесь и не должно быть «строки», почему он ругается что строка должна быть в кавычках? - 9:2 error Missing semicolon semi
строка 9, позиция 2 — это перед «}» зачем там «;»? - 10:1 error Too many blank lines at the end of file. Max of 0 allowed no-multiple-empty-lines
Если я удаляю последнюю пустую строку, то потом он ругается, что программа запрашивает новую строку, но не может обнаружить
/usr/src/app/finalGrade.js
15:27 error Newline required at end of file but not found eol-last
Поэтому я и прошу помощи разобраться, ведь даже запуская решение учителя, выдаются те же ошибки линтера
0
Сергей К.
Ого! Мы разобрали, как работать с линтером на примере ошибок системного файла. К вашему коду они не имеют отношения. Поправил ошибку в среде исполнения. Вам нужно получить последнюю версию практики, нажав кнопку Сброс, и после этого проработать замечания линтера повторно.
1