I would like to lint html angular template files via the command line, similar to:
ng lint
I would like to validate the Angular html templates to check they are valid and the variables are correct, so I can run this in a CI pipeline like Travis or AWS Codebuild.
Visual studio code runs Angular Language Services and can do this:
What I want is to capture these errors, so that I don't let invalid Angular html templates get into releases.
How can I achieve this?
What you are seeing here is in fact a Typescript error, not a lint error.
There is an option fullTemplateTypeCheck that allows you to capture such errors during build when AOT is activated:
This option tells the compiler to enable the binding expression validation phase of the template compiler which uses TypeScript to validate binding expressions.
This option is false by default.
Note: It is recommended to set this to true because this option will default to true in the future.
This can in fact slow down your build considerably, so what you can do if you only want to use this in the CI pipeline:
Create a new tsconfig.strict.json next to your tsconfig.app.json like this:
{
"extends": "./tsconfig.app.json",
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
In angular.json add a new configuration "strictProd" under projects>YourProject>architect>build>configurations that looks like this:
"strictProd": {
"tsConfig": "src/tsconfig.app.strict.json",
"aot": true
[...your other prod settings here],
}
Run it with ng build -c strictProd
The best thing I have found is the html hint node package. You can read about it here: https://htmlhint.com/docs/user-guide/getting-started
Here is settings for the .htmlhintrc that work with Angular.
{
"tagname-lowercase": true,
"attr-lowercase": false,
"attr-value-double-quotes": true,
"attr-value-not-empty": false,
"attr-no-duplication": true,
"doctype-first": false,
"tag-pair": true,
"tag-self-close": true,
"empty-tag-not-self-closed": true,
"spec-char-escape": false,
"id-unique": false,
"src-not-empty": true,
"title-require": true,
"alt-require": true,
"doctype-html5": true,
"id-class-value": "true",
"style-disabled": true,
"inline-style-disabled": true,
"inline-script-disabled": true,
"space-tab-mixed-disabled": "true",
"id-class-ad-disabled": true,
"href-abs-or-rel": false,
"attr-unsafe-chars": true,
"head-script-disabled": true
}
Related
Expected result:
Applied prettier - code formatter in my react project on save.
For example, I hope the semicolon can be automatically added when I save the file.
add semicolon automatically when save
My Problem:
Based on Vscode Output, It seems that prettier has been applied already.
However, the semicolon were not added automatically.
Vscode output about prettier
Dependencies:
prettier: ^1.18.2 / Vscode: 1.73.1 (Universal) / Mac OS
What I have tried:
After searching lots of suggestions online, I have checked these things in VScode.
select default formatter
enable formatting on save & paste
enable prettier
set resolveGlobalModules to false
Setting in my .prettierrc:
{
"useTabs": false,
"singleQuote": true,
"trailingComma": "all",
"printWidth": 80,
"arrowParens": "avoid",
"bracketSpacing": true,
"quoteProps": "as-needed",
"semi": true,
"tabWidth": 2,
"jsxBracketSameLine": false,
"jsxSingleQuote": false
}
Any suggestion would help! Thanks a lot.
I am trying to understand the structure of the Visual Studio Code settings.json file. As I can see, there are multiple settings that appear to be JSON objects but are set separately. Take the following for example:
"javascript.autoClosingTags": true,
"javascript.suggest.autoImports": true,
"javascript.updateImportsOnFileMove.enabled": "always",
Now I am wondering if it is possible to turn this into something like the following:
"javascript": {
"autoClosingTags": true,
"suggest": {
"autoImports": true,
}
"updateImportsOnFileMove": {
"enabled": "always"
}
}
I have tried it with one or two settings but did not see an immediate difference which leads me to believe that this is indeed possible. On the other hand, I did get a few other seemingly unrelated errors, including failure of settings sync for me which has left me unconvinced.
Now I know this is possible for per-language settings like the following:
"[python]": {
"editor.defaultFormatter": "ms-python.python",
"editor.formatOnPaste": false
},
But can we do that for editor key for example:
"editor.fontLigatures": true,
"editor.formatOnPaste": false,
"editor.formatOnSave": false,
"editor.formatOnSaveMode": "file",
"editor.formatOnType": false,
Background
I just get into learning react.js, and find out a lot people are using prettier and eslint to format their code. But after I setup my own based on the online guides, wired things happened. It can format code correctly when I'm saving the file, but not when I manually trigger format function (Shift+option+F). It will format the file to a wired way that eslint will give me errors.
Here's the vscode settings that I'm using:
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false
},
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"prettier.disableLanguages": [
"js"
],
"editor.detectIndentation": true,
"editor.tabSize": 2,
and I also have a .eslintrc file
{
"extends": ["react-app", "plugin:prettier/recommended"],
}
and a .prettierrc file
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"jsxBracketSameLine": true
}
What I assume here is the vscode keyboard shorcut(Shift+option+F) is not using the same configuration (or even not the same tool) as autoFixOnSave.
But also I don't understand how these tools work and integrated together, and which one overrides which one. Can some one help?
Why are you disabling js for prettier?
Do you know Prettier can be integrated flawlessly with ESLint?
Take a look at this article: Prettier: Integrating with ESLint
In your user/workspace settings, just add:
"files.autoSave": "off",
"editor.formatOnSave": true,
"eslint.autoFixOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.organizeImports": true
},
"eslint.options": {
"extensions": [".js", ".jsx"]
},
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
Also it is recommended having a .editorconfig in your root folder:
# http://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = crlf
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false
And finally, in your .eslintrc file, add:
"extends": ["react-app", "plugin:prettier/recommended", "prettier/react"],
Check out the eslint-plugin-react for validating react.
I am not looking at the mac version of VS code, but I think that hotkey is supposed to be Shift + Option + F
Edit: I usually disable the default javascript formatter in vscode, because it can conflict with my eslint rules, which makes it impossible for eslint to properly format my code.
ESLint has it's own Fix command which does not have a hotkey on my setup, but I have eslint.autoFixOnSave: true.
Prettier does not hook into the internal vscode format command. It also has it's own command set up. The default hotkey to run prettier format for the majority of the available prettier extensions is CMD + Shift + P -> Format Document but will trigger on save if editor.formatOnSave is true.
I just started using Angular 2 in VSCode. Using the Angular.io "Tour of Heroes" as an example, the built-in HTML linter does not recognize the Angular 2 directives in the HTML tags, such as *ng-if or (click), as you can see in this screen shot:
Is there some setting or extension I am missing? This is valid HTML code in an Angular 2 app and I don't want a lot of errors for nothing -- but I want to use the linter in case I make actual errors elsewhere.
You can add exceptions to the list of attributes in the HTMLHint extension:
"htmlhint.options": {
"attr-lowercase": ["*ngIf", "*ngFor"]
}
The attr-lowercase rule can be true, false or an array of attribute names to ignore.
Just add this fragment into you settings file (.vscode\settings.json in workspace or edit via File>Preferences>Settings):
"htmlhint.options": {
"tagname-lowercase": true,
"attr-value-double-quotes": true,
"attr-no-duplication": true,
"tag-pair": true,
"spec-char-escape": true,
"id-unique": true,
"src-not-empty": true,
"title-require": true
}
With this, HTMLHint plugin will parse correctly Angular templates and stop throw warnings.
I'm developing typescript library and I want to use it in my web application.
I would like to compile all library files into single library.js file.
I tried to use ts compiler with tsconfig.json file as well as compiling with gulp task but I have issues with class order in output file in both cases.
Also generated code has lots of IIFE
var MyLibrary;
(function (MyLibrary) {
.....
})(MyLibrary || (MyLibrary = {}));
I guess it should be there just once, not for each class, right?
My tsconfig.json:
{
"compilerOptions": {
"module": "amd",
"noImplicitAny": false,
"removeComments": true,
"preserveConstEnums": true,
"outFile": "dist/js/floor-map-designer.js",
"sourceMap": true
},
"exclude": [
"node_modules",
"dist",
"src/app.ts"
]
}
and gulp tasks config:
var tsProject = ts.createProject({
declarationFiles: true,
noExternalResolve: false,
module: 'AMD',
removeComments: true,
outFile: "my-library.js",
exclude: ["app.ts", "config.ts"]
});
var paths = {
npm: './node_modules/',
lib: "./lib/vendor/",
tsSource: ['./src/MyLibrary/**/*.ts', "./lib/typings/tsd.d.ts"],
tsOutput: "./dist/js/",
tsDef: "./lib/typings/"
};
gulp.task('ts-compile', function () {
var tsResult = gulp.src(paths.tsSource)
.pipe(ts(tsProject));
return merge([
tsResult.dts.pipe(gulp.dest(paths.tsDef)),
tsResult.js.pipe(gulp.dest(paths.tsOutput))
]);
});
I remember last time I used TypeScript I used to create autogenerated reference file with lots of
/// <reference path="...."
and add
/// <ts:autoRef="referencesFile.ts"> to all .ts files.
But I have noticed TS compiler should not depend on file order anymore and my IDE doesn't require it anymore, so I would like to avoid it if possible.
I also noticed using --out option is considered bad (at least according to this website: https://github.com/TypeStrong/atom-typescript/blob/master/docs/out.md) but how to replace it?
I'm using Typescript 1.7.
I also noticed using --out option is considered bad (at least according to this website: https://github.com/TypeStrong/atom-typescript/blob/master/docs/out.md) but how to replace it?
Use modules : https://basarat.gitbooks.io/typescript/content/docs/project/modules.html
In your case change :
module: 'AMD',
removeComments: true,
outFile: "my-library.js",
to
module: 'amd',
removeComments: true,
And use a module loader (for amd that would be requirejs http://requirejs.org/)