I have html snippets as template literals in my JavaScript code. As the snippets are spread over multiple files and can be quite large and complex in structure and nesting, it can happen that some closing tags are mistakenly omitted or nesting is wrong.
Is there a way to automate checking of these html pieces for correct nesting and balance of opening and closing tags?
Try to go with best IDE like Netbeans, VScode or sublime where you can easy track the HTML tags opening and closing , Code Syntax(PHP,JS,CSS etc).
You can surely opt for an IDE, otherwise you can use a html validator in gulp task and verify your html files. Gulp task will first remove literals from the file(temporarily) and then stream the output to the validator.
Related
I have an HTML file which is a Django template. For the most part, it's pretty boring, there's a bit of HTML and some Javascript code inside script tags.
The problem is that I've inserted a single line of Django template language (with the double curly braces), and it cascades into a thousand different errors on every line. How do I ignore this? All I can find is // #ts-ignore on Google which doesn't seem to work with HTML files.
I don't even know where to begin. Is this a linting issue? What linter am I using, which documentation should I look at, etc. I assume I should be using the default tools for javascript. Please help!
The line in question is:
var achievementFlag = {{ achievement_flag|yesno:"true,false" }};
Naturally, the double curly braces is bad, as is the | and the :. And now the javascript just has squiggles all over it.
Add this line to settings.json
"html.validate.scripts": false,
this line will make vscode ignores javascript validation in HTML files
credits: https://github.com/Microsoft/vscode/issues/17433#issuecomment-273870328
I have observed that, while writing JS in script tags into the template will run the script, inserting them into the template using a Handlebars expression will prevent it from running.
I have tried writing this into my component:
test: Ember.String.htmlSafe("<script>console.log('Hello World')</script>")
And in my template:
{{test}}
This will insert it into the DOM, but will not run the code. I thought it was because HTMLBars did not allow script tags in the template, but just writing
<script>console.log('Hello World')</script>
into the template itself will run the JS within.
Can somebody tell me if there is a way to achieve this, or provide an explanation as to why this happens? Thanks in advance.
If you work with javascript string you can use extra {{{ }}} to display them properly. Safe template output with:
{{{test}}}
That will do the job. Have a look at this blog post
http://www.kaspertidemann.com/html-safe-strings-in-handlebars/
There is no need to do that. You can either run JavaScript code from your Component or have <script> tag in your template (like you've described in your question).
I'm using the Angular Dialog Service to build pop up forms on my website. This services source can be found here: https://github.com/m-e-conroy/angular-dialog-service/blob/master/README.md
Anyway, the actual angular and JavaScript that describes what the modal contains and does goes after the following where the ... is:
.run(['$templateCache',function($templateCache){
$templateCache.put(...)
My problem is the html and js seem to have to all be one after the other with no spacing or indentation allowed between any of it. This causes the code that describes the modal to essentially just be a wall of text that has become borderline unreadable and editable in my complicated modal. An example of this can be found in the JS portion of the code here: http://codepen.io/m-e-conroy/pen/rkIqv
Is there an easy fix which will allow me to have my modals html and JS in non wall of text format and have it build successfully? If there is no fix this seems like a pretty big flaw in using the Angular Dialog Service to handle modals...
Thanks!
There are tools, like html2js, that can build templateCache for you.
It means, that you can store your html code in html files (where it obviously should be), and then gather it into single javascript file with $templateCache.put(/* content of html file */); in it. Just don't forget to include resulting module into your project, so when one of the services requested html file, it could be found in templateCache.
So you shouldn't edit html in .js files. It's wrong on many levels.
I used Netbeans before. How do I do some refactoring (changing variable names, make method out of code, etc) in Sublime Text 2 on a Mac? What I'm doing right now is "select next instance of a word", but that's only because I'm using only one file
I wrote this plugin for JavaScript refactoring
https://github.com/s-a/sublime-text-refactor
I guess there are a lot more out there supporting RoR.
What works for me is the "Find all" option (Ctrl+F and Alt+Enter).
This way you can edit the text and all the matches will be edited at same time.
What happened here was that I just did refactoring via grepping and find/replace. I'm on Vim now and substitute/grepping is still my method when I need to refactor. I guess this is one of the features that an IDE provides that a text editor doesn't.
Alongside ctrl+click you can use ctrl+D also. Works for me.
What I do is select multiple variables with ctrl+click and the once you type, all selected strings are changes. The only difference is that you need to select them manually. But then again -- once you select the first one, all matching variables are highlighted
The sublime-text-refactor plugin works as long as you need to refactor variables. If you need to refactor plain strings it doesn't work. For example if you need to replace 'components' in file paths 'file/*/components' by 'sections' the plugin will not help you because it expects to rename variables (console indicates when I try to refactor: unable to locate components variable).
My answer is not related to sublime text but I was led to this thread when I found the adapted solution so it might help people in the same case. Sublime text is not necesarily the solution for refactoring.
In NodeJs, what I did to ensure refactor across files was to create a gulp task that replaces the value and rewrites the file:
var gulpReplace = require('gulp-replace');
gulp.task('refactor', function(){
gulp.src(['app/**/*.js'], { base: './' })
.pipe(gulpReplace(/components/g, 'sections'))
.pipe(gulp.dest('./'));
});
$gulp refactor
What this does is that, in all js files under the app directory, I replace the string 'components' by the string 'sections'. In my case I needed plain string replacement, it was not variable renaming so the need was very straightforward and this method is very efficient for that. Adapt this method to your case and back up your code before you refactor, as it is the equivalent to find/replace via grep, there is no prior check, be sure of what you're doing.
I advise to delete the gulp task once you are done with your refactoring as it can be very dangerous ! CAUTION
I have some twig files that are a mixture of JavaScript, HTML, and twig markup. Is there a way with Eclipse to hi-lite a section of code and format it as, say JavaScript, then hi-lite another section and format it as HTML? I tried association the file type *.twig with the JavaScript editor, but, I do not seem to get any formatting. Syntax highlighting and code completion would be good too.
Thanks,
Scott
It is possible. If you have HTML/JS editors available (eclipse classic has them by default).
Go to preferences and: General > Editors > File Associations and add *.twig as a new file type and then add HTML editor (in the bottom panel) to it.
Then go to: General > Content Types, click on Text/HTML node (in Content Types box) and add *.twig file association in the bottom panel.
I've checked this and it works.
You can try to find a plugin that will support twig files and provide syntax highlighting. The Twig Eclipse Plugin looks promising as it at least seems to support HTML and twig markup together.