I'm new to Atom, the text edit, and I installed many packages, including Linter
https://github.com/AtomLinter/Linter
But it's not showing errors or highlighting code, it's just getting ignored.
Do any of you know what I should do to get this to work?
You have to additionally install a linter package for your desired language.
Here is a list: https://atomlinter.github.io/
I needed to remove atom config and start from scratch to make linter working
mv ~/.atom ~/.atom.bak
Instead of opening atom from the terminal like I normally do, I opened it from the application icon. Then atom asks if it was ok to install linter dependencies and presto it was working.
Hope this helps.
My problem with linter-eslint was because I accidentally installed eslint 8 which is not yet supported by atom linter or linter-eslint. After I installed eslint ^7.32.0 and typed npm i, restarted Atom and changed ecmaversion from 13 to 12 everything started working fine!
When I start Atom up, the small UI panel in bottom left is present, but shows zero values for the 3 severities.
If I then do a CTRL-s/save (even with no changes), it starts working..
In my package settings, I have "Lint on Open" (which doesn't seem to work at all) and "Lint on Change" (which is "only for supported providers" so could be that) ticked.
Here is my .eslintrc. Hope it helps.
module.exports = {
root: true,
"parserOptions": {
"ecmaVersion": 7,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
}
},
"extends" : "rallycoding",
"rules": {
"react/require-extension": "off"
}
};
I had to add the path of my project's node_modules dir to the Atom's eslint package settings, as well as create an .eslinterc.json file in my project. After doing both those, I had to restart Atom (I started it from the command line $ atom .) and it started working.
Related
Developing a vue application with the eslint-plugin-vue, I am getting the following error when trying to use the comment shortcut in VS code over a template section that contains a nested comment:
Parsing error: nested-comment. eslint-plugin-vue
Is there a setting in the linter config file that I can change to allow commenting over nested comments or do I need to restart the linter somehow?
Update: it would appear if I added the following line to my .eslintrc.js file, from this site https://eslint.vuejs.org/rules/no-parsing-error.html#vue-no-parsing-error I should not be seeing this error:
'vue/no-parsing-error': ["error", {
'nested-comment': false
}]
However, it still remains. I do not have the option to run ESLint restart lint server in my command palette.
If you do have a .eslintrc.cjs file or anything alike, you could probably put that in there
/* eslint-env node */
module.exports = {
[...],
rules: {
'vue/html-comment-indent': 'off',
},
}
off is to say that you don't even want to hear about it anytime soon.
Otherwise, you can also use 'warn', if you want a warning.
Here is an official reference: https://eslint.vuejs.org/rules/html-comment-indent.html#vue-html-comment-indent
Edit: This was a bug in 3.1.0 - upgrade to 3.1.1+ to get a working version of this feature.
create-react-app 3.1.0 is supposed to have support for customising the eslint warnings, as per: https://github.com/facebook/create-react-app/pull/7036
The documentation is here: https://facebook.github.io/create-react-app/docs/setting-up-your-editor#experimental-extending-the-eslint-config
I believe the rule setting I have in my package.json is correct because IDEA picks it up and no longer dislays the dot-location warning in the editor.
But npm start still complains with:
./src/Auth/AuthenticationProvider.tsx
Line 135: Expected dot to be on same line as property dot-location
My package.json is as per the documentation and I've added the EXTEND_ESLINT variable to the .env file.
My package.json config:
"eslintConfig": {
"extends": [
"react-app"
],
"rules": {
"dot-location": "off"
}
},
The environment variable is set in my .env file.
And the example failing source code looks like:
props.auth0Client.loginWithRedirect().
catch((e)=>{errorHandler(e)});
What am I doing wrong?
Am I misunderstanding how eslint config works, or maybe I'm wrong about what this new feature of create-react-app is actually supposed to do?
Please note: I don't want to add annotations to my code everywhere to disable the warning - the question is about customising the eslint config.
It appears you are not doing anything wrong and there is a bug in create-react-app 3.1.0. If you want to track progress, an issue has been filed in GitHub.
I used to build React apps starting with create-react-app, then I would install eslint with plugins and a custom config, run an eslint init, and add some custom scripts to run eslint and eslint auto fix easily and automatically on certain actions like a build. Create-react-app now comes with eslint already installed and "ready to go." In VS Code, I see the linter running in my "problems" tab. How do I now run eslint autofix? That is the main benefit of a linter in my opinion.
I use VS Code. I have spent some hours trying different ways to set up linters in create-react-app. I believe that the inclusion of eslint has changed the state of this quite a bit and made most of those posts simply outdated. I had a setup working for about a year using Prettier to avoid ejecting eslint, but an unresolved issue has caused that to stop working. So I have taken a step back to try to understand the state of the create-react-app dev environment now. Are folks using VS Code with create-react-app? If so, do you have autofix working?
I found one way to get an autofix on save in a create-react-app in VS Code. I don't know if it's the best one. It's simpler than I thought.
After running:
create-react-app my-app
Run:
npm install --save-dev prettier
Add to root directory:
.prettierrc
{
"tabWidth": 2,
"semi": false,
"singleQuote": true
}
Install VS Code prettier extension.
Find VS Code user settings json. Mine is:
{
"typescript.check.npmIsInstalled": false,
"window.zoomLevel": 0,
"editor.minimap.enabled": false,
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
"emmet.syntaxProfiles": {
"javascript": "jsx"
},
"eslint.alwaysShowStatus": true,
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.formatOnType": true,
"files.autoSave": "onFocusChange",
"prettier.semi": false,
"prettier.tabWidth": 4
}
Now, if I save, I will get autofixes.
Most of the tutorials online assume that eslint is not already installed with create-react-app and/or that eslint and prettier must be integrated with plugins and an eslintrc file. My fix may be missing something, as it may not be making use of eslint or there may be conflicts between the two linters at some stage.
Goal
Be able to create a new project for react-native (using react-native init), and enabling flow checks on Visual Studio Code.
What I Did
I just created a new react-native project
react-native init iaptris
then opened Visual Studio code
cd iaptris
code .
I saw this errors
Whis these error descriptions (in italian, sorry)
Googling I concluded I must install Flow Extension for VsCode and I did.
I then disabled native checking for current workspace, setup file association and path to flow command
{
"javascript.validate.enable": false,
"files.associations": {
"*.json": "json",
"*.js": "javascriptreact"
},
"flow.pathToFlow": "C:\\Users\\mirko\\.vscode\\extensions\\flowtype.flow-for-vscode-1.0.1\\node_modules\\.bin\\flow.cmd"
}
Closed and restarted vscode on same workspace
The problem
At this point, errors disappeared, but also, removing a curly brace to throw a new syntax error, I do not see any errors. No errors.
Question
What else must I do now?
Actual solution, please post your answer if this is not the better method. And I think it's not the better method.
react-native init <project name>
open VsCode
disable Javascript -> Validate for the current workspace only (sorry if next image is in italian, but it's enough as reference)
install a plugin
yarn add eslint babel-eslint eslint-plugin-flowtype --dev
or
npm install eslint babel-eslint eslint-plugin-flowtype --save-dev
create a .eslintrc with following content
{
"parser": "babel-eslint",
"plugins": [
"flowtype"
],
"extends": [
"plugin:flowtype/recommended"
]
}
close and reopen vscode and the workspace
Using IntelliJ/WebStorm if I run tsc from a FileWatcher, my compile errors are linked to the files in the editor, such that if I double-click on a compiler error, it opens that file and takes me to the offending line of code.
However if I run Grunt, either via the integrated Grunt console, or via a FileWatcher, the compile errors do not have links and I have to manually open the file and goto the offending line number.
Is there any way to get the compile errors comming from Grunt integrated as links, like the TypeScript FileWatcher's invocation of tsc does?
When running Grunt as a file watcher, you can set up filters to make links clickable. You can use existing filters as example: open your file watcher settings, press Output Filters..., open the filter settings and copy the regular expression specified there. See http://www.jetbrains.com/webstorm/webhelp/add-filter-dialog.html
In Webstorm 8, it is not possible to apply regular expression filters on Grunt console output.
The way to go, as mentioned by lena, is to call Grunt directly via an External tool entry, and set up appropriate regex filters, such as:
For grunt-ts:
$FILE_PATH$\($LINE$,$COLUMN$\):.*
For grunt-tslint:
...$FILE_PATH$\[$LINE$,\s$COLUMN$\]:.*
Also see my comment above regarding a caveat for grunt-tslint in some environments.
I believe the '>>' added by grunt-typescript is throwing it off. Try grunt-ts (disclaimer : one of the authors) which is tested with webstorm https://github.com/grunt-ts/grunt-ts
I noticed in Webstorm 9, the built-in Grunt console was filtering/linking on typescript compile errors with grunt-typescript. I am not sure if this is a recent change or not, but it was linking this for example,
So, I went into grunt-tslint/node_modules/tslint/build/formatters, and copied proseFormatter.js to ./myproseFormatter.js. Then I tweaked it so the tslint output format would match the compile error format, by replacing square brackets with parens, and removing the whitespace between line and column number. Finally, I referenced my custom formatter in my gruntfile tslint config by adding the formatter and formattersDirectory properties:
tslint: {
options: {
configuration: grunt.file.readJSON('tslint.json'),
formatter: 'myprose',
formattersDirectory: './'
},
all: {
src: [ 'app/**/*.ts' ]
}
}
and it worked!