Open cshtml files as HTML in Atom - atom-editor

Based on this issue (https://github.com/atom/atom/issues/1718) from atom's github concerning the customFileTypes option, I have the following in my config.cson.
"*":
core:
customFileTypes:
"source.html": [
"cshtml"
]
My intention is for cshtml files to be automatically opened with the HTML grammar for syntax highlighting, however, my cshtml files still open as Plain Text.
If I change "source.html" to "source.gfm", then my cshtml files open as Github Flavoured Markdown, so I suspect that "source.html" isn't the name I should be using.
How can I get this to work? And, where can I get a list of names for grammars?

Made this work by using text.html.basic as the scope name, so my config looks like this:
"*":
core:
customFileTypes:
"text.html.basic": [
"cshtml"
]
To get a list of eligible scope names, open the Atom console (Ctrl+Alt+I in Windows, Ctrl+Shift+I in Linux) and run Object.keys(atom.grammars.grammarsByScopeName).
You get an array in return, so Object.keys(atom.grammars.grammarsByScopeName).sort().join('\n') will give you a nicely sorted list.

In case you want to display the file with the ASP.NET Razor theme (standard for .cshtml files), go ahead and do the following:
Download the language-cshtml package
https://atom.io/packages/language-cshtml
Change you ~/.atom/config.cson to include the following:
"*":
core:
customFileTypes:
"text.html.cshtml": "cshtml"

Related

Live SASS Compiler creating extra files?

I'm currently trying to learn how to implement SASS into my web development projects but I'm struggling a little bit with figuring out how to properly compile my .scss files into one single .css file.
When I run sass --version in my terminal, I receive 1.53.0 compiled with dart2js 2.17.3. As far as extensions go, I'm using Live Sass Compiler by Glenn Marks, and within the settings.json file, my configuration looks like this:
{
"liveSassCompile.settings.formats":[
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css"
},
],
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
],
"liveSassCompile.settings.generateMap": true,
"liveSassCompile.settings.autoprefix": [
"defaults"
]
}
This is my current project directory:
Current Project Directory Structure
My current issue is that whenever I click Watch Sass, the only file I want to be output is the main.css and main.css.map but it creates an index.css and index.css.map file as well.
I'm trying to implement something similar to the 7 - 1 SASS Architecture, and within each of those folders I created an index.scss that'll contain each file in it's directory, which will then be #forward to the main.scss.
Is there any particular way I can avoid the extra files being created? I'm not too familiar with npm but I've heard it would be more beneficial to learn it in order to utilize SASS as opposed to using a VS Code extension and I'm more than open to taking that approach and scrapping the entire extension as a whole if it proves to be more efficient.
Thank you for your help in advanced, I hope I provided enough information!
Dart sass comes with an inbuilt compiler
Just run the code
sass --watch sass/main.scss css/main.css
This one faulty line is probably the reason for your problem.
Change this:
"liveSassCompile.settings.generateMap": true,
to this:
"liveSassCompile.settings.generateMap": false,
If you decide to stick with my extension then you can specify a single file to output/watch with the liveSassCompile.settings.includeItems setting - as shown below
{
"liveSassCompile.settings.includeItems": [ "/path/to/main.scss" ]
}
Alternatively, and possibly a better solution, you can use a negative glob expression in the liveSassCompile.settings.partialsList to treat every other file as a partial. Then, when any SASS file is saved, it triggers compilation of just your main.scss file

How to define the default grammar for new file extensions

I'm opening files in Atom with a new file extension, a file extension that is not recognized by any of the existing grammars (i.e. Plain Test, C, C#, etc.). How can I associate my new file extension with one of the already-available grammars?
Success is being able to open a file with my new file extension and have Atom default to my chosen grammar automatically.
I tried the suggestion but Atom bounced it back at me:
customFileTypes:
"source.fs": [
"*.seedsource"
]
For personal use, you can register a custom file type in the Atom config file (config.cson by default).
Here's a minimal example of what config.cson might look like. Make sure to insert the customFileTypes part at the correct indentation, since CSON files are indentation-sensitive.
"*":
core:
customFileTypes:
"source.c": [
"*.custom-extension"
]
If you want to share this configuration with other users, it's probably better to create a package that contains a grammar file (e.g. grammars/custom.cson):
fileTypes: [
"custom-extension"
]
patterns: [
{
include: "source.c"
}
]
scopeName: "source.c.custom"
In both cases, example.custom-extension would be opened with C syntax highlighting.

How to update Site.less/site.css and bundle/minify to generate output with BuildBundlerMinifier

I have several questions on my ASP.NET MVC CORE 2.2 project.
The main goal is very simple, i want to update my stylesheet and then deploy this result. I have a Site.less, site.css, site.min.css, site.min.css.gz that i want to update with a css class style, a bundleconfig.json with my input css, javascript files to be bundled and a compilerconfig.json that has Site.less as an input and site.css as output. I also have BuildBundlerMinifier installed on my project (NuGet).
Questions:
1- What file should i update when adding some new style: Site.less, site.css or both?
2- What are the steps to minify and bundle before i publish my app?
bundleconfig.json:
[
{
"outputFileName": "wwwroot/css/bundle.min.css",
// An array of relative input file paths. Globbing patterns supported
"inputFiles": [
(...)
"wwwroot/css/Site.min.css"
]
},
(...)
// Optionally specify minification options
"minify": {
"enabled": true,
"renameLocals": true
},
// Optionally generate .map file
"sourceMap": false
}
]
compilerconfig.json
[
{
"inputFile": "wwwroot/css/Site.less",
"outputFile": "wwwroot/css/site.css"
}
]
When i rebuild my project in my Output window (Visual Studio 2017) i have the following messages.
Cleaning output from bundleconfig.json,
Done cleaning output file from bundleconfig.json, Begin processing bundleconfig.json, Minified wwwroot/css/bundle.min.css, Done processing bundleconfig.json
Thank you.
My first question is answered.
I have installed an extension in Visual Studio 2017 (Tools -> Extensions and Updates) named Web Compiler. When i make an update in my less file, the css file and min.css are auto generated (min.css.gz is not and don't know why). The files that the code is auto generated are water marked with Generated keyword.
To produce the auto generated files you only need to rebuild the project.
This works with other files but in my case i am only using this ones.
EDIT
My second question is also answered.
I have installed another extension: Bundler & Minifier
To produce bundle you need to have those config json files i have posted in my first post and then open Task Runner Explorer and double click on wwwroot/css/bundle.min.css (inside StyleSheets menu) and the bundle file will be auto generated.

Grunt-init copyAndProcess function: Can I pass in multiple values to 'noProcess' option?

I'm using grunt-init to build a template for a site structure I repeat regularly.
The template.js file uses the init.copyAndProcess function to customize most of files but a few of them get corrupted by the file processing (some fonts and image files) and I want to include those files in the 'noProcess' option. If these files all existed in the same directory, I could use the noProcess option as mentioned in the documentation [ See: http://gruntjs.com/project-scaffolding#copying-files ] and pass in a string like and it works:
var files = init.filesToCopy(props);
init.copyAndProcess(files, props, {noProcess: 'app/fonts/**'} );
Unfortunately the files that I need to have no processing performed on are not all in the same directory and I'd like to be able to pass in an array of them, something like the following block of code, but this does not work.
var files = init.filesToCopy(props);
init.copyAndProcess(files, props, {noProcess: ['app/fonts/**', 'app/images/*.png', 'app/images/*.jpg']} );
Any thoughts on how I can have multiple targets for the 'noProcess' option?
As soon as I posted the question, I realized that my proposed code did work. I simply had an invalid path when I'd renamed my 'app' directory to 'dev'.

Why can't Xcode 4 find my .h files during a build?

I have a project that won't build because the compiler (?) can't seem to find the .h files. I have tried using the full path, relative path and setting the Project Search Paths (both Header and User Header) and nothing seems to work. What I find very strange is even with the full path it gives an error: No such file or directory (the file does indeed exist in the specified path).
What could be the problem?
import statements:
#import <Foundation/Foundation.h>
#import <zxing/common/Counted.h>
#import <zxing/Result.h>
#import <zxing/BinaryBitmap.h>
#import <zxing/Reader.h>
#import <zxing/ResultPointCallback.h>
Headers are located in:
/Users/rolfmarsh/iPhoneCodeLibrary/BarcodeLibrary/zxing-1.6/cpp/core/src/zxing
Header search path is:
$(inherited)
"$(SRCROOT)/zxing/common"
and
/Users/rolfmarsh/iPhoneCodeLibrary/BarcodeLibrary/zxing-1.6/cpp/core/src
Full path of the include files:
/Users/rolfmarsh/iPhoneCodeLibrary/BarcodeLibrary/zxing-1.6/cpp/core/src/zxing/Result.h
I also had quite a bit of pain with ZXing's dependencies. Here's some tips that will hopefully be of assistance to others with similar issues.
This line does an import:
#import <zxing/common/Counted.h>
For the compiler to find Counted.h, the header search path must be specified.
Now, because the import statement will look for Counted.h relative to two subfolders zxing/common, we need to give it the parent folder of zxing.
In this case, the parent folder is going to be something like:
/ .. my full path here ../cpp/core/src/
So, under the src directory you'll find zxing.
How do we configure this in Xcode? Best to do it relatively. Otherwise, the project will fail on a different user's machine.
To do this, we specify a path relative to the project directory. As follows:
$(PROJECT_DIR)/../cpp/core/src
That goes in the Header Search Path of Build Settings for the ZXingWidget target.
The crucial thing with this header path stuff is to specify the relative directory to search from. In our case, we specify search relative to $(PROJECT_DIR). That variable specifies the directory of our subproject ZXingWidget.
Other caveats. Be careful to specify these in the build settings of your target. If you do it at project level you'll still need to specify it at target level using the $(inherited) variable.
Also, don't forget that the build transcript can be very useful. Look at the header paths included with the -I flag.
As a general debugging technique, I like to specify the absolute path in my settings. That gives a clean build and I know that the files can be included, and where they definitely are. Having done that I then use the $(PROJECT_DIR) to specify a relative path.
I am posting this in order to make things simple for newbies like me that are integrating zxing qr reader in their projects and to bring closure to a couple of threads related to zxing integration.
1.
Main thing - Be absolutely sure you have the latest version.
http://zxing.googlecode.com/svn/trunk/
[By now, January 18th, you will have no more issues with that zxing/common/ folder. Easiest fix for this: get the latest code!]
2.
Go to zxing -> iphone -> ZXingWidget.
Drag ZXingWidget.xcodeproj file and drop it onto the root of your Xcode project's "Groups and Files" sidebar.
[you should now have ZXingWidget.xcodeproj listed there and it has to drop down and list it's content]
3.
In the same place, project navigator, select:
Your project file - > Targets -> 'your project name' -> Build phases -> Link binary with libraries.
You should find a folder named 'Workspace'. Add 'libZXingWidget.a' from within.
4.
Still in Build phases, expand Target Dependencies and add ZXingWidget.
5.
Select Build Settings and search for Header Search Paths.
You need to add 2 records to Header Search Paths. You do not need to associate values to User Header Search Paths. You achieve this by double clicking the column on the right. A small popover window will apear. Use the + button to add the first record. Add:
../zxing/iphone/ZXingWidget/Classes
Now use the + button to add the second record. Add:
../zxing/cpp/core/src
These are the values I use. These values work because I use the same folder to host both my project and the zxing folder.
[Be sure to refer your folder properly in case you decide to have a different file structure.]
6.
Go back to Build Phases and add the following ios frameworks required:
AVFoundation
AudioToolbox
CoreVideo
CoreMedia
libiconv
AddressBook
AddressBookUI
7.
Create a set of files (.h&.m) and change it's .m extension to .mm
8.
Test the integration by including the following in the file previously created:
#import <ZXingWidgetController.h>
#import <QRCodeReader.h>
At this point you should run into missing files only if you are not running the latest version. Hope this helps.
Some things to check:
- file permissions
- can you build from the command line using xcodebuild?
I went over many blog posts on how to fix this. This one helped me well.
http://alwawee.com/wordpress/2011/12/01/zxingwidgetcontroller-h-not-found-zxing-installation-problem-solution/
The problem was that header search paths were not properly defined.
So I...
1) Downloaded zxing 2.1
2) From the download I copied: iphone, cpp, objc and readme and pasted in a folder names "zxing"
3) I added the new folder "zxing" to my project (on my mac) not to the xcode app.
4) From the created folder zxing I dragged the zxingwidget.xproje to my xcode project
5) I followed all the steps you find in all the blogs
KEY TO SOLVE THIS
6) I followed this steps for xcode errors https://stackoverflow.com/a/14703794/1881577
7) I followed this steps for header path file errors http://alwawee.com/wordpress/2011/12/01/zxingwidgetcontroller-h-not-found-zxing-installation-problem-solution/
IMPORTANT NOTE: I had to do follow step 7) twice, I had to select the project target and assign header paths, and I had to select the project project and assign header paths.
8) Build zxingwidget project (from the scheme select options)
9) Build Run the project.
Hope this helps other people as well.

Resources