I want to use the Babel plug-in: optional-chaining, but the vscode console prompted me incorrectly. How can I solve this problem? - visual-studio-code

I created a new project with the create-react-app scaffold, and then I wanted to use the optional-chaining plug-in of babel. I installed the package according to the document and configured it, but vscode prompted grammatical errors. What can help me? please.
this is my package.json.
this is the problem:

If you are using CRA there is probably no way instead of ejecting project and applying Babel presets manually (according to https://github.com/facebook/create-react-app/issues/4604).
However, if you are decided to use eject there should be able to add plugin to babel config which is described here https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining. Probably applying stage-0 preset of Babel (https://babeljs.io/docs/en/babel-preset-stage-0) can also be a solution.
Edit: see also Null-safe property access (and conditional assignment) in ES6/2015

The error you are seeing is from Visual Studio Code's built-in JavaScript and/or TypeScript validator. In order to circumvent this, add this to your vscode settings.json file:
"javascript.validate.enable": false
Additionally you can disable the built-in TypeScript validator like this:
"typescript.validate.enable": false
Once those are disabled, eslint will take over and show you the proper errors when applicable.

Related

VSCode 'The file is in the program because: Default library for target 'es3''

I'm using VSCode. After the last update of the IDE, I see this error (Even if I didn't open any project to work on).
I googled it, and I tried several actions according to this link:
https://github.com/microsoft/TypeScript/issues/43838
but none of them seems to work.
Anyone faced the issue? (I'm not using TypeScript in any of my projects and I don't have any tsconfig.ts file). Is it related to one of my VSCode extensions?
It is a general update problem about visual-studio-code with the last update. Issue can be followed from here: https://github.com/microsoft/vscode/issues/168420
Installing JavaScript and TypeScript Nightly extension is helpful for me.
Configure .eslintrc.json in your folder again and reload the vs code
example:
.eslintrc.json file for salesforce
Or
you can refer below link to config your eslint file
https://eslint.org/docs/latest/user-guide/configuring/

What is the correct way to add an option to the VSCode Settings Menu (editing VSCode's source)

(not sure if I asked this earlier somewhere, but I can't find it)
Earlier I found out how to create a usable entry on the VSCode settings menu (also usable in settings.json) by editing these VSCode source files:
vscode/src/vs/editor/common/config/editorOptions.ts
Adding a variable in export interface IEditorOptions.
Adding an enum in export const enum EditorOption.
Adding an item in export const EditorOptions.
vscode/src/vs/editor/common/standalone/standaloneEnums.ts
Adding an enum to export enum EditorOption.
I don't know if that's the correct way, I just copied other options.
I hadn't yet figured out how to access the new entry's value from the function I wanted to use it in (I had already implemented the functionality, just without the option).
I then got sidetracked and forgot about this.
Now when I try to build it I'm getting an error (it builds fine without the changes).
running yarn --cwd <mydir> run gulp vscode-linux-x64
gives Error: monaco.d.ts is no longer up to date. Please run gulp watch and commit the new file.
I'm not sure exactly how I'm supposed to run gulp watch here. I don't know anything about yarn or gulp (I'm just using the VSCode contributor instructions), and running yarn --cwd <mydir> run gulp watch doesn't fix the problem.
It sounds like vscode/src/vs/monaco.d.ts being read by the build process before being written/updated, because its timestamp changes. I'm not sure if that's my fault and/or if it's a red herring.
Does anyone know what I should be doing here? Has anyone here modified the settings menu?
Is there any documentation out there for modifying the settings menu? (I had a look, didn't find anything).

How to enable java linting in Code Mirror?

We are trying to create a code editor(IDE) in Angular 11. We mainly use java code in it. We need to show lint errors while typing and also beautifier in it. Is there any package or solution already available?

VS Code with es6

I am getting the linting error in my code 'import' is only available in ES6 (use 'esversion: 6').
Everything es6 related is throwing an error. Not sure what I have to configure to get it to work.
Add a file named .jshintrc to your project and inside this file type this:
{
"esversion": 6
}
As you can see it here:
The full documentation of jshint options are found here: http://jshint.com/docs/options
Edit: I've added a way to enable es6 if you use ESLint instead of JSHint as well as updating the screenshots since VSCode has changed since my original answer.
JSHint Method:
If you are using JSHint, you can add the following to your settings:
"jshint.options":{
"esversion":6
}
ESLint Method:
If you are using ESLint, you can add the following to your settings:
"eslint.options": {
"env":{
"es6":true
},
"parserOptions": {
"ecmaVersion": 6 // or 7,8,9
}
}
ESLint Configuration Documentation
How to update the settings
Neither JSHint or ESLint are enabled in a fresh version of VS Code, so you'll need to install the extension(s) by going to extensions and then searching for your preferred linter.
In VS Code, head to settings
When the settings display you'll see the settings sections:
Note that there are two sections where you can customize your settings, User Settings and Workspace Settings
User Settings Is where you should apply any global settings you will want for any project you will ever work on.
Workspace Settings Is where you can make settings changes that should only be applied to your current project.
In my case, since I know that only some of my projects can use ES6, I need to have the error hinting to warn me if I'm using ES6 my non-ES6 projects...so I set this only to my Workspace Settings
But, if you know that anything you code in VS Code is going to be an ES6, project, then save a step, and add it to your user settings.
Click on either User/Workspace depending on your preference. Search for JSHint or ESLint (whichever you use). Click on any of the Edit in settings.json links, it doesn't matter which one.
Add the pertinent settings depending on whether you use JSHint or ESLint:
JSHint
ESLint
You can add "esversion": 6 to "jshint.options" in the user settings.
{
"jshint.options": {
"esversion": 6
}
}
Just to round out the excellent suggestions already submitted, you can also set this on a file by file basis by added this escaped line (and similar for other jshint settings) to the top of your file.
// jshint esversion:6
Actually you can add it anywhere, but it only effects subsequent code, allowing you to flip settings on and off if you're desperate to do something weird.
Add the next hint before your code:
/* jshint esversion: 6 */
Example
Make sure, you do the above configurations with the json but also remove/disable the jshint extension for workspace if you're using eslint and vice versa.,
Disable your jshint extension like this:

How to disable Ecmascript 6 linting warnings in Visual Studio Code RC5?

I know that this is still a release candidate so it's possible that this functionality doesn't yet exist, but there is a setting for it in the Default Settings:
// Specifies which version of ECMA-Script is used.
"javascript.validate.target": "ES5"
I tried overwriting this in the User Settings by entering:
"javascript.validate.target": "ES6"
but this didn't work. Has anyone had any success with this?
ES6 is not yet supported by the JavaScript language service in VSCode.
You can vote for it, though!
Nowadays this is handled in jshint options, so you should set jshint.options.esversion to 6.