I've been experiencing some undesirable behaviour in my VScode for some time now. The editor or one of its extensions will add some lines like below automatically to the top of the file:-
const { parse } = require("dotenv/types");
const { fail } = require("tap");
My code does not need these at this stage and they prevent my code from compiling causing a silent failure. Is there some setting i can add/change to prevent these auto additions.
I have following extensions enabled in the workspace:-
Babel Javascript
DotENV
EsLint
Prettier - Code Formatter
html to jsx
Azure Account
Azure Databases
Todo Tree
Please let me know if any other information is required.
Thanks Ahead.
Related
(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).
I am using Eslint and Prettier to style and format my code. I have already set up my eslint and prettier configuration and everything is working fine. However, I am facing a problem on the bitbucket deployment. When my code is deployed, the pipeline fails due to eslint/prettier linting errors. However, these errors were not present when I run my code locally. It seems that the pipeline is not linting correctly?
Some advice or help will be much appreciated.
I ran into this error because of a version issue with eslint. Once we incremented the version, deleted the node-modules and package.lock file, we were able to resolve the errors successfully by formatting the erroring files individually
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.
I want to use the css linter "stylelint" on my VScode text editor.
I downloaded the plugin and install it, then I make the "css.validate": false. But i don't have any box that show me error on my CSS files. What can I do ?
If you're getting started with stylelint for the first time, there are two key steps to enable it in Visual Studio Code:
turn off Visual Studio Code's built-in CSS linter and turn on the stylelint extension
create a stylelint configuration object and turn on some rules
You can complete the first step by following the extension usage instructions, mainly changing your Visual Studio Code settings to:
{
"stylelint.enable": true,
"css.validate": false,
"scss.validate": false
}
And the second step by following the configuration documentation on the stylelint website. I believe the quickest means to get started is:
install the recommended config into your project using npm:
npm install --save-dev stylelint-config-recommended
Create a .stylelintrc file that extends the recommended config in the root of your project:
{ "extends": "stylelint-config-recommended" }
This config turns on just the possible error rules. It is a sensible config to start with and build upon. There are over 150 rules built-in to stylelint. You can choose to turn on and configure as many, or as few, as you like to meet your linting needs.
For anyone seeing this and trying to lint other file extensions; note that by default, the extension validates only CSS and PostCSS files.
In order to validate file extensions such as SCSS, you would need to explicitly state so in .vscode\settings.json:
{
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"stylelint.enable": true,
"stylelint.validate": ["css", "scss"]
}
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: