WebStorm auto-indent inconsistent with indentation settings - javascript

I want to auto-indent an entire JavaScript file in WebStorm, and in my settings I have the following:
The problem is that when I use the menu Code -> Auto-Indent Lines or Code -> Reformat Code the indentation level remains at 2.
Is there a setting somewhere I am missing? I don't want to be inconsistent with the coding standards put in place.

The problem was with the .editorconfig file located in the root of the project directory. Although I can't recall receiving a warning, the settings in that file overwrote the Webstorm settings, and changing them to the desired indentations resulted in the desired result.

Related

Visual Studio Code - New blank line at the end of file when saving

(There's a similar question asked >> Visual Studio - blank line at the end of each new file. But This is the complete opposite. And that doesn't answer this)
I have Visual Studio Code Version 1.19.0 on OSX.
JavaScript (ES6) linter wants me to add a new blank line at the end of each file. When I hit save after adding a new blank line myself at the end of the file, VS Code removes that automatically. My concern is that, overriding any DEFAULT User Setting won't fix that.
Anyone with a solution? Thanks in advance.
(Setting I tried overriding but failed >> "files.insertFinalNewline": true)
You can change the linter rule that enforces you to enter new line at the end
so this will work
if you use ESlint you cab use the rul eol-last and set its value to "never"
in your .eslintrc file
{
"rules": {
"eol-last" :"never"
}
}
learn more
eol-last ESlint
For those who want to get rid of the new line at the end of a file:
I had a similar issue and the solution provided by 9paradox in this post solved my problem.
When I was saving my code (Python, JSON, JS, etc...) I got always a new line inserted at the end of the file.
Solution: if, e.g. on Mac, you are editing any file in your project, then go to the root directory of your project, let's say /Users/<username>/git/<project> then search for .editorconfig in that folder, then open that file with any text editor like vi or TextEdit and make insert_final_newline = false. VS Code takes over the settings changes immediately. No restart needed.

JS Map file debugging in chrome

is there a way how to debug source maps in chrome? At least to see where is what mapped?
My problem is that I am remapping ts generated file (using source-maps), for whatever reason, does not matter. When I remap them and use console.log or console.error the console correctly shows the line where the console.log or console.error was executed and I can even navigate to the line in the original ts source file. But when I try to set a break point in the .js file on the same line where the console.log is located the break point is set incorrectly to "previous" line (or other file, if there is no any statement in the .ts file)
So the question is, is there a way to tell to chrome to show me mapped relations for js and ts files? If no, is there any other tool, ideally friendly, where I can click on statement and see were is it mapped to? I am lazy to write one, especially in this case I am not sure what I am doing wrong.
Thanks
EDIT:
In between I have found this:
http://sokra.github.io/source-map-visualization/#
and this:
https://github.com/danvk/source-map-explorer
I could not find anything because I was asking google in a wrong way.
EDIT2:
My bundled and remapped files seems to be ok.
It seems to be a bug in chrome debuger itself. Because when I place a break point directly to the typescript file it stops correctly.
So it seems to me the chrome incorrectly maps only breakpoints set in the original (bundled) js file what is actually bundle of compiled typescipt files accompanied with remapped .js.map files to the .js.map bundle.

How to get javascript variables in a debugger when using webpack

I am developing a react application with the bundler Webpack.
I would like to debug this application with a browser console (here i use chrome).
I have used source-maps and equivalent in my webpack config:
devtool = 'inline-source-map';
Now errors are displayed with the exact line of the original file.
The problem is that i want to access to live variables with the console.
So far I found two ways to display them:
1- Add a library in webpack.config.js
output: {
library: "lib"
},
export variable in the code export var foo = 34; and finally inside the browser console use lib.foo.
2- use breakpoint and access to variable set in the file
Is there another solution to access live variables?
Thanks
There are other solutions, but that means defining global variables and that should be avoided as it can have side effects in the code you're trying to debug, so you might run into problems that are not identical with and without exposing the variables, which makes your debugging experience very frustrating.
Using breakpoints is the best you can do for debugging purposes. The browser debuggers, especially the Chrome devtools, are extremely powerful and it's absolutely worth spending some time to get familiar with them.
Because pausing the app at every breakpoint you set for getting to a certain point can be tedious, you can use conditional breakpoints. One way is to use the debugger statement in your code, in that case you can guard it by any JavaScript you like, for instance this will only pause when the input to the function is 5:
function debug(input) {
if (input === 5) {
debugger;
}
// Other code
}
Another way is to add conditional breakpoints in the Chrome devtools. As you've configure source maps, you can set the breakpoints in the original source under Sources > top > webpack:// > .
To set a conditional breakpoint you simply right-click a line and choose Add conditional breakpoint... and enter the condition, e.g. input === 5. You can also Edit breakpoint... to change or add a condition to an existing breakpoint. For more information about breakpoints in Chrome see Pause Your Code With Breakpoints.
In the Sources tab you can also right click anywhere and Add folder to workspace so you can edit the sources directly and save the changes to disk (in older versions of Chrome it's a bit more complicated to add a folder to the workspace). To let Chrome know that the source maps of webpack correspond to your workspace, you can right-click any webpack source map and select Map to File System Resource... and you simply choose the correct file of the workspace. After that, all the sources of webpack should automatically be mapped to the correct files. Now you can set the breakpoints there and when you change something and save it (Ctrl + S or Cmd + S), webpack will recompile it. See also Set Up Persistence with DevTools Workspaces.
Sometimes setting a breakpoint might be too much effort for only getting values of variables. With just console.log you probably end up with a lot of different messages. To make it easier to find the messages you need, you can use console.group which lets you put messages inside a group, that can be expanded and collapsed. The groups can also be nested. Use console.groupCollapsed if you want the group to be collapsed initially.

IntelliJ - Tab indentation in Javascript does not work

I want to use tabs for indentation in my Javascript files. I changed the configuration as usual, but the preview doesn't seem to take my modification in account. Neither in the acutal files.
What is surprising is that the "Spaces" subtab is formatting the code the right way, but it's is the only place where it works. (See screenshots below)
Did anyone have the same issue ?
I am using IntelliJ Ultimate 2016.1
Take a look a editorconfig.org .
You will need a .editorconfig file at the root of your project. It's a markup file that works accros multiple IDE's to set some common configuration like indentation and trailing spaces. Here is an example.
root = true
[*]
indent_style = space
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
[*.js]
indent_size = 2
From Intellij Idea 14 onwards, IDE by default detects existing indentation styles in existing files and uses them instead of your settings. You can Turn this feature off in the prefferences:
Prefferences -> Editor -> Code Style -> Detect and use existing file indents for editing
If turning off this feature does not help, make sure your project does not have .editorconfig file, which defines indentation styles as well.

SonarQube always displays 0.0% code coverage for Javascript project

I am new to SonarQube, and am trying to use it with a Javascript project, on Windows. I've followed the doc as best I can and am successfully seeing the static code analysis sonar does.
I am using JsTestDriver for my unit tests, and producing a code coverage report file. I see the test results in SonarQube, but the code coverage is always reported as 0.0%. If I don't specify a code coverage report file, or specify a file name that doesn't exist, the code coverage block in my dashboard does not display at all, so I know Sonar is seeing the file in some sense. I have run jGenHtml against the file and it produces correct HTML output, with the results I expect, so I know the file has content and is formatted correctly.
I have specified the location for these files in my Javascript plugin settings. As indicated by the doc and some forum posts I found, I used the relative directory path test/results for the actual unit test results (which show up fine) and the relative file name test/results/code-coverage.dat for the coverage report. I've also tried specifying the file as an absolute path, but it didn't help.
Any insight would be appreciated.
This is working now, thanks to the suggestion comment from David RACODON.
It seems my code coverage report contains file paths that look like this:
SF:H:\perforce_workspaces\atlasjs_main\.\test\lib\jquery-1.8.2.js
I edited the file to remove the \.\ bit in the middle, and now Sonar is able to import the file.
The sample project's coverage report does not have this in its paths, and I note that I have been using a slightly newer verson of jsTestDriver than the sample app. I am using 1.3.5, while the sample app comes with 1.3.4.b. I don't know if they changed the output format between revisions of the coverage plugin, or if this is something specific with my project. In any event, I should be able to figure out a way to prevent or remove the offending characters.
Note that jgenhtml was able to read my file just fine with the extraneoud \.\ so this seems to be an issue with Sonar being very picky.

Categories