PHPStorm plugin query - angularjs

I have the following line of code in an AngularJS project
$scope.listOfServices = ([].concat(...arrayOfResults.map(item =>item.data.trainServices))).filter(item => item);
This code works perfectly, however PHPStorm is kicking off saying its full of errors and it expects a new line and so on. This means on the rare occasion I reformat my code as I had a late night coding and got messy, PHPStorm moves the code around and breaks it.
I have AngularJS plugins, JavaScript plugins etc. What plugin can I install to STOP PHPStorm thinking the above line is broken.

You are right!!!
myFunction(...iterableObj); = Spread-Operator - This should be supported by PHPStorm JavaScript syntax validator.
You may going to create a bug issue over here: youtrack.jetbrains.com. PHPStorm supports JavaScript highlight / syntax autfill / validations so there should be no need for a third party plugin.

Related

Monaco Editor - Web Workers cannot be loaded in production build

I'm currently implementing the Monaco Editor from Microsoft (https://github.com/microsoft/monaco-editor), with a plugin for yaml validation, autocompletion, etc. . (https://github.com/remcohaszing/monaco-yaml) in our react js APP.
Maybe it is also important to tell you, that our authentication process gets managed via Keycloak.
When I'm running my code in development (React-scripts start) everything is working as expected.
I can create the editor, the schema gets implemented correctly and autocompletion is also working.
BUT as soon as I try to use the editor in PRODUCTION Build it seems that it cant load my workers correctly, following the editor is not working as it should.
I always get these errors in production:
I tried to use monaco-editor-webpack-plugin with React Rewired but it didnt have an positive effect either.
I also tried to use the worker loader to load the workers, but it also didnt help
Any more Ideas how I can fix this ? Has this to do something with CORS ? Because it tries to load files in a url? Or am I missing something ?
Thanks in advance
What I tried: Monaco Webpack Plugin, plain webpack, worker-loader
Expected Behaviour: Monaco Editor with Monaco Yaml working in production build.
Current behaviour: Working fine in development build, cannot load workers in production.
The problem was, that my keycloak (on a different port) rejected to load the working scripts. After handling this problems, the editor is working fine.

React JSX error : Unclosed regular expression

Recently I was facing an issue coding React app on Visual Studio code. Because of this issue, whenever I wrote JSX inside the render function of the React Component and saved it, it would go messed up (I mean indentation would get messy). See the pic:
This error was also showing error like:
1. Unclosed regular expression
How to solve this?
If you are using jshint plugin, remove it and install ESLint plugin.
It is a good replacement for jshint in reactJS work.
I tried several options like creating a .eslintrc file or .jshintrc file.
But it turned out that in my Visual Studio Code IDE, there was third party extensions(eslint/jslint/tslint/beautify/jsformatter etc) that were causing a big mess in my JSX code.
I had to go to the extensions and disable all the extension which could hinder in the natural process of linting and code cleaning of React framework.
(These extensions are really great. But disabling them helped me in solving this issue of mine, no offense to anyone.)
If you are facing the same issue and the issue persists event after adding a .jshintrc with content:
{
"esversion": 6
}
then consider disabling the third party extensions.
Hope my answer helped.
the extension that did it for me was...
jshint
dbaeumer.jshint
Dirk Baeumer
as #abhay-shiro says, disabling a few extensions will usually resolve the issue.
I had the same problem, but it was "beautify" extension which was causing the error, I uninstalled it and installed prettier. It fixed the problem.
I solved this issue by disabling show syntax errors checkbox in visual studio 2015.
Tools -> options - > text editor -> javascript -> intelliSense -> general -> show syntax errors(disable)

Intellisense with ES5

I have been using VSCode for quite a long time and while it's very good, I'm missing intellisense and features that seem to be ES6-only:
I cannot ctrl+click to go to definition
I cannot have a preview of the definition
Here is what I am using:
ES5
Angular JS
All my files are wrapped into a closure, like:
(function() {
angular.module('foo').factory('bar', ['dep1', function(dep1) {
dep1.stuff();
}]);
})();
With that in mind, is it possible to have "goto definition" and other nice VSCode stuff working ? If so, how ?
What can I do to be able to simply click ctrl+click on dep1 and have VSCode open the file where dep1 is defined ?
What I can recommend is that you try to install John Papa's extension for Visual Studio Code for Angular 1.x. It is installed directly through VSCode. You can check some examples of how it works here. It will offer you code completion and it will automate a lot of tasks you frequently do in Angular, such as creating services, controllers, directives...
Btw John Papa is the author of the Angular Style guide and his way of coding could be called "best-practice" in the world of Angular development.
The best way to get intellisense for javascript/typescript is to install typings.
I find that this extension is good with installing typings: https://marketplace.visualstudio.com/items?itemName=benjaminromano.typings-installer
Once you have that installed, you can then launch it (F1 > Typings Installer: Typings > angular) and install the dt~angular typings. from there you should start getting intellisense, go to definition and possibly error checking.
Code should then pick this up (if not just reload the editor). You should then start getting intellisense. If you want to tweak it more, I would suggest looking into jsconfig.json files: https://code.visualstudio.com/docs/languages/jsconfig
You can get general purpose typing information pulled by enabling Synthetic Default Imports in Visual Studio Code.
It lets you get Intellisense either from TypeScript type definitions or by inferenced type information from the JSDoc of many popular repositories.
Here is a tutorial for how to get things set up.

Angular application works on Chrome but not Safari

My website works fine on Chrome but is broken on Apple Mobile Safari.
I have troubleshot the situation and have found that it is the below line of code placed in side of my angular controller that is causing the problem. With out this code everything works fine.
The code takes all images on the page and puts them inside of an array. Anything I can do differently to ensure proper compatibility? Thank you!
$scope.load_picture_cotent = function () {
$scope.pictures = Array.from(
document.querySelectorAll
('div.album [style^="background-image"]')).map
(el=>el.style.backgroundImage.replace(/url\((.*)\)/,'$1')
.replace(/"/g,'')
.replace(/thumbnails/,'highresolution'));
console.log($scope.pictures);
}
You can also view the website here.
Please let me know if you need any more information or would like me to expand my post to include more information.
you are using ECMA 2015 lambda notation, try to wrap this with babel and try it again, did you check the browsers compatibility status with ECMA Script 2015?
Thank you bretanac93.
He was right, I was using a newer version of Javascript than is currently supported by browsers.
He recommended I use Babel which is a compiler that converts new Javascript to a compatible Javascript.
I used babel to compile the compatibility javascript and it works like a charm.

Class 'SqlFormatter' is missing CAKEPHP 3 DebugKit

I've just installed the latest Debugkit from https://github.com/cakephp/debug_kit.
Everything is working. However, when I clicked on the "SQL Log", the CakePHP logo keeps spinning. I tried to debug by opening up the console.log and saw an 500 error. It shows the below.
Error: Class 'SqlFormatter' not found
File /Applications/MAMP/htdocs/App/vendor/cakephp/debug_kit/src/Template/Element/sql_log_panel.ctp
Line: 24
From my understanding, SqlFormatter class is not found in sql_log_panel.ctp. How can I add/declare the SqlFormatter class?
Just install it via composer, problem very likely solved then.
https://getcomposer.org/doc/00-intro.md
http://book.cakephp.org/3.0/en/installation.html#installing-cakephp
I highly recommend you to become familiar with composer, it is a standard tool for php developers for some time now. Composer will automatically install the dependencies for you.
Your second best option would be to download the SqlFormatter package manually from where ever it comes from and set your autoloading or include manually up.

Resources