I am using Chirpy (http://chirpy.codeplex.com/) inside Visual Studio 2010 and I've got JSHint running. The problem is, I don't know how to set the options for JSHint, or even to see what options are on by default.
I tried the inline syntax (see below) but Chirpy seems to ignore that. Does anyone know how to set the options?
/*jshint evil: true, boss: true */
I am slightly embarrassed but also pleased to say that the inline syntax does work. However because of the default options it is hard to tell.
I read through most of the Chirpy code base as well as the code base for UglifyJS to figure out that Chirpy just sets all the values for the options to false. This means it doesn't require much of your JavaScript code.
To turn on the strictest JSHint options, using this at the top of your JS file:
/*jshint bitwise: true, curly: true, eqeqeq: true, immed: true, newcap: true,
noarg: true, noempty: true, nonew: true, nomen: true, onevar: true,
plusplus: true, regexp: true, undef: true, strict: true, white: true */
Note, you cannot put a space between /* and jshint. Chirpy will ignore it if you do.
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 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
}
I have just started using JSHint (through the Sublime-Linter package for Sublime Text 2). I would like to suppress its warnings regarding functions that are used before they are defined, as I see no problem with using function definitions like this. For example, the following code generates warnings:
(function($){
$(document).ready(function()
{
formValidationSetup();
refreshErrorMessages();
});
function formValidationSetup()
{
}
function refreshErrorMessages()
{
}
})(jQuery);
The warnings:
formValidationSetup is defined but never used
refreshErrorMessages is defined but never used
I've tried setting undef to false in the JSHint options, but I'm still getting these errors. Is there another option I should be setting? Form the JSLint docs for undef:
true if variables and functions need not be declared before used. This
is not available in strict mode.
To avoid the warning
defined but never used
in jslint in your javascript add comments like:
/*exported formValidationSetup, refreshErrorMessages */
In jshint and jslint you can set the unused option to false:
/*jshint unused:false*/
See Options
I had this problem with should and expect in Chai tests. I ended up with this pattern:
'use strict';
var request = require('supertest');
var should = require('chai').should(); // jshint ignore:line
var expect = require('chai').expect; // jshint ignore:line
process.env.NODE_ENV = 'test';
var appPromise = require('./index');
describe('GET /r_u_up', function() {
it('respond with 204', function(done) {
appPromise.then(function(app) {
request(app)
.get('/r_u_up')
.expect(204, done);
});
});
});
You can simply use
"unused": false,
in your .jshintrc
Interestingly, adding 'use strict'; inside the IIFE suppresses the error. Not sure why though.
A better way not touching the Gruntfile.js in a typical Yoeman setup is to edit the .jshintrc file (a hidden file in Unix system). And update the content as the following:
{
"curly": true,
"eqeqeq": true,
"immed": true,
"latedef": true,
"newcap": true,
"noarg": true,
"sub": true,
"undef": true,
"unused": false, // the change is here
"boss": true,
"eqnull": true,
"node": true
}
set the "unused" to false.
You'll want to use the 'latedef' option