I'm using the Atom Code Editor for a VueJS Project with ESLINT (feross). By trying to quickly prototype a layout I get these errors.
Missing space before opening brace
Strings must use singlequote
Extra semicolon
During the prototype phase I would like ESLINT/ATOM to disable/ignore these errors and render the site anyways.
How to do that?
You could temporarily turn off eslint. In my setup, inspecting build/webpack.base.conf.js shows the following snippet:
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.vue$/,
The linting rule will enable eslint. Lets avoid that and set config.dev.useEslint to false. Go to config/index.js and alter the following snippet:
// Use Eslint Loader?
// If true, your code will be linted during bundling and
// linting errors and warnings will be shown in the console.
useEslint: false,
In your .eslintrc file, do the following:
"rules": {
"space-before-blocks": "off",
"quotes": "off",
"no-extra-semi": "off"
}
This will turn off the above rules. I would suggest instead of turning it off let it throw warning, so in future you remember to fix these issues.
ESLint has an awesome documentation: https://eslint.org/docs/rules/
Related
I'm working in a new-to-me large javascript codebase that is a work-in-progress. As happens often in a large codebase, a variety of people have added code that has not been tested. I just spent way too much time debugging an issue that ended up being caused by a misspelled method name (essentially a missing method):
stream.renegotiate() // this is what is should have been
stream.renogotiate() // this is what it was
The project is bundled using webpack, without linting. So I thought I could just add eslint to the webpack config and it would tell me about the problems. It works for misspelled global methods, but is not checking class member name spelling.
Here is my .eslintrc file:
{
"plugins": [
"eslint-plugin-import"
],
"extends": [
"eslint:recommended",
"plugin:import/recommended",
"plugin:import/typescript"
],
"rules": {
"no-undef": "error",
"no-extra-semi": "off",
"no-unused-vars": "off"
},
"env": {
"browser": true,
"es2022": true
}
}
The typescript option is in there because a few of the newer files in the project are typescript, but still there are 100+ legacy javascript files that have been recently worked on that have issues.
Is there a way to get eslint (or some other checker) to be able to detect and error-report the example above of stream.renogotiate() without doing a fullscale migration to typescript?
Javascript is loosely typed and it's possible to monkeypatch new methods onto existing classes and objects at runtime, so (as far as I know) there's no way to catch these sorts of issues at build time without something like typescript, even if you know the object's type.
Consider the example below. The test function throws on the first invocation but not on the second, despite being passed the same stream instance both times.
class Stream {
renegotiate () {
console.log('renegotiate invoked');
}
}
function test (stream) {
try {
stream.renOgotiate();
}
catch {
console.log('error trying to invoke renOgotiate')
}
}
const stream = new Stream();
test(stream); // throws
Stream.prototype.renOgotiate = () => console.log('renOgotiate invoked');
test(stream); // doesn't throw
Turns out the typescript compiler can be used for exactly what I described above. You can use it in vscode to check individual files by adding this to the top of a .js file:
// #ts-check
If you want to check a whole project, create a jsoncfig.json file wherever the root of the javascript content is, then run the typescript compiler from the command-line with this:
npx tsc -p jsconfig.json
In my case, it did exactly what I was hoping it would do, highlighted a significant number of undefined symbols, including the one originally referenced, with this output:
error TS2339: Property 'renogotiate' does not exist on type 'MediaStream'.
This is a great first-step in porting a large javascript project to typescript. Thanks to the vscode docs for the guidance: https://code.visualstudio.com/docs/nodejs/working-with-javascript
FWIW, here is what I used for my jsconfig.json:
{
"compilerOptions": {
"module": "commonjs",
"target": "es2020",
"checkJs": true,
"allowJs": true,
"noEmit": true,
"skipLibCheck": true
},
"exclude": ["node_modules"],
"include": ["src/legacy/**/*"],
}
I'm trying to disable eslint's fixing on save for a specific rule when using vscode. In practice I'd like React hooks' dependency array issues to be shown to the user but not fixed. This is my settings.json:
{
"editor.formatOnSave": false,
"[javascript]": {
"editor.formatOnSave": false
},
"[javascriptreact]": {
"editor.formatOnSave": false
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
"eslint.codeActionsOnSave.rules": [
"!react-hooks/exhaustive-deps",
"*"
],
"eslint.validate": ["javascript", "javascriptreact"]
}
I would expect eslint to show a warning when I break the exhaustive deps rule, but leave it there when I save the file. Instead my code is still fixed on save, what am I doing wrong?
(note: the hooks dependencies rule shouldn't be broken, but I'm working on an existing project, I can't review all existing hooks and I've already seen the code break because of hooks triggering when they shouldn't have because of ESLint's auto-fixing)
I have worked on a vue project which I created using vue cli. Because of this, eslint is also included in the project. Up until now I haven't done much with eslint. If I understood correctly, eslint helps with stylistic errors, semantic errors etc in the code to identify potential problems.
I only rarely used // eslint-disable-next-line if there was e.g. a console.log clashing with the rules.
Now I wanted to include some new javascript code into the project. This code comes from someone else, so I cloned the repo and then just imported it in my main.js via a relative path to the folder/file that I have cloned. I think this was okay. However now I get some problems with eslint as the imported file has no config for eslint.
This is the exact error originating from the import:
Module build failed (from ./node_modules/eslint-loader/index.js):
Error: No ESLint configuration found
I am not sure what to do now, even though I already searched for the error.
I only saw some config for eslint in the package.json, I think. If it would help to have its content or something else, please say so and I will add it!
How can I tackle this problem? Thanks in advance!
This might be a long shot, but this is the .eslintrc.js file I shove into all my react projects at the root directory to get rid of that error. You'll want to change some of the settings but this is the basic structure.
module.exports = {
parser: 'babel-eslint',
env: {
browser: true,
commonjs: true,
es6: true,
node: true,
jest: true,
},
parserOptions: {
ecmaVersion: 2020,
ecmaFeatures: {
jsx: true,
},
sourceType: 'module',
},
plugins: ['react', 'react-hooks'],
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'plugin:json/recommended',
'prettier',
],
settings: {
react: {
version: 'detect',
},
},
rules: {
'react/prop-types': ['off'],
'react/no-unescaped-entities': ['error', { forbid: ['>', '}'] }],
},
};
At my new job the convention is to put a space before the colon like so:
{
"a" : "1"
}
Is there any formatter, a setting, or similar which does this for VSCode? I tried prettier, but that just removed all the spaces. Language is javascript, if that matters
Edit: I know how to use a formatter, I just don't find one that will put a space before a colon. Maybe there's one that allows me to use regex for formatting?
It is possible using ESLint https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint + it's option key-spacing https://eslint.org/docs/latest/rules/key-spacing ...
.eslintrc.json
{
...,
"rules": {
...,
"key-spacing": [
"error",
{
"afterColon" : true,
"beforeColon" : true,
"mode": "strict"
}
]
}
}
Longer answer if you are not familiar with ESLint:
in project root run npm install eslint (or probably could be installed globally)
in project root run ./node_modules/.bin/eslint --init or npm init #eslint/config to configure .eslintrc.json
maybe restart of VSCode is needed
Note: .eslintrc.json can be used in root and also in subfolders to maintain different ESLint options (for e.g. resources-frontend-browser files and resources-backend-nodejs files)
How can I tell tslint to ignore JS files?
In tsconfig.json I have "allowJs": true because I do want it to compile JS files:
{
"compilerOptions": {
// ...
"allowJs": true,
// ...
},
// ...
}
However I do not want it to lint them.
With this setup, it complains that "No valid rules have been specified for JavaScript files". This is because it tries to lint JS files, but has not been given any rules for doing so.
It has been suggested in another Stack Overflow thread to add the following, so that it has some rules to go by (a bit of a hack really):
"jsRules": {
"no-empty": true
}
But what if I don't want it to check for this rule either? I just don't want it to lint JS files at all.
I've found out how to do this.
To ignore JS files, add the following to your tslint.json (you can, of course, ignore any file type in a similar fashion)
"linterOptions": {
"exclude": [
"**/*.js"
]
}
Note that linterOptions.exclude was introduced in tslint 5.8, so you must have this version or later to use this feature.