Related
This workspace has two linting plugins(eslint and prettier):
My lint settings:
I can indeed see the default format document is set to prettier:
(The Problem) The format on save is still the following:
The format I'm expecting:
(line#8 has a total of 59 characters including whitespaces, which is under 120)
Note: on another project this is not an issue. But in that other project I also have linting files configured inside it.
I think your vscode config and settings and .prettier are not the same.
try creating .prettierrc file in your project root and add a prettier config. vscode will automatically pick up the config.
Add all the format-related config in .prettierrc vscode should read the config and format. settings.json is not the right place to add all the prettier config. It'll also be helpful for other team members otherwise when someone commits it'll change the format.
.prettier
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true,
"printWidth": 120,
"bracketSpacing": true,
"jsxBracketSameLine": true
}
.vscode/settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
This seems to be an ESLint bug.
See https://github.com/prettier/prettier-vscode/issues/595#issuecomment-463762649.
Try disabling the ESLint extension and see if it works.
I'm working on a angular js and angular 8 hybrid application. The new components created in angular are downgraded to be used in angular js. Code snippet of module is shown below:
#NgModule({
// Declaration and Imports
providers:[
ServiceName,
// Other Services
],
entryComponents: [
ComponentName,
// Other components to be used in angular js
]
})
export class FeatureModule{
}
declare var angular: angular.IAngularStatic
angular.module('app')
.directive('cmpName', downgradeComponent({component: ComponentName }) as angular.IDirectiveFactory)
.factory('serviceName', downgradeInjectable(ServiceName));
In app.module.ts file, there is following code.
// Usual Stuff
export class AppModule {
constructor(
private upgrade: UpgradeModule,
) {
}
ngDoBootstrap() {
this.upgrade.bootstrap(document.body, ['app'], { strictDi: true });
}
}
Nothing has been updated in component spec file generated by angular cli.
In tsconfig.spec.json,
{
"extends": "../tsconfig.json",
"compilerOptions": {
"baseUrl": "./",
"outDir": "../out-tsc/spec",
"types": ["jasmine", "node", "angular"]
},
"files": ["test.ts", "polyfills.ts"],
"include": ["**/*.spec.ts", "**/*.d.ts"]
}
karma.conf.js looks like below.
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '#angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('#angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../coverage/ProjectFolder'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true
});
};
Now, if I run npm run test or ng test command to run test suite, I'm getting following error.
An error was thrown in afterAll Uncaught ReferenceError: angular is not defined ReferenceError: angular is not defined at Module../..path-to-module-file/feature.module.ts.
How can I resolve this issue? Do I have to mock angular variable declared in the module file. Any help is appreciated?
I don't know too much of the nitty gritty details, but I run a hybrid application with Webpack and Karma. I downgrade all my components so they can be used in AngularJS, just like you.
The difference is that I have a file called vendor.ts that contains AngularJS. I bet you do too, since you only talk about the tests failing, not the product being broken. I have an entry in my Karma config file:
files: [
{ pattern: "node_modules/babel-polyfill/dist/polyfill.js", watched: false },
{ pattern: "node_modules/intl/locale-data/jsonp/en-GB.js", watched: false },
{ pattern: "node_modules/intl/locale-data/jsonp/fr-FR.js", watched: false },
{ pattern: "static/polyfills.ts", watched: false },
{ pattern: "static/vendor.ts", watched: false },
{ pattern: "node_modules/zone.js/dist/long-stack-trace-zone.js", watched: false },
{ pattern: "node_modules/zone.js/dist/proxy.js", watched: false },
{ pattern: "node_modules/zone.js/dist/sync-test.js", watched: false },
{ pattern: "node_modules/zone.js/dist/jasmine-patch.js", watched: false },
{ pattern: "node_modules/zone.js/dist/async-test.js", watched: false },
{ pattern: "node_modules/zone.js/dist/fake-async-test.js", watched: false },
{ pattern: "node_modules/angular-mocks/angular-mocks.js", watched: false },
{ pattern: "static/main.ts", watched: false },
{ pattern: "static/main.test.ts", watched: false },
],
This tells Karma which files to watch and serve in the browser. I think that means that after Webpack compiled these files, Karma-Webpack can find the compiled files and serve them.
I've picked up a legacy project, and have been asked to update the create-react-app package from 1.0.3 to the latest.
The problem is, the new proxy settings aren't working; requests that were previously going to my/resource.do are just returning index.html
As suggested in the docs (https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development#configuring-the-proxy-manually), I took the 'proxy' object in package.json and converted it to instructions in a file called setupProxy.js. The new js file is definitely being read; I just can't get it to work.
Can anyone see where the mistake is here? This is exactly as specified in the docs, but for some reason requests that worked before are now failing.
Any help greatly appreciated
Before (in package.json)
"proxy": {
"/api": {
"target": "http://localhost:9000"
},
"/some/thing": {
"target": "https://example.org:8452/",
"secure": false,
"changeOrigin": true
},
"/some": {
"target": "https://example.org:7324",
"secure": false,
"changeOrigin": true
},
"/.*": {
"target": "https://example.org:8452/",
"secure": false,
"changeOrigin": true
}
}
After (in setupProxy.js):
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
app.use('/api', proxy({ target: 'http://localhost:9000/' }))
app.use('/some/thing', proxy(
{
target: 'https://example.org:8452/',
secure: false,
changeOrigin: true,
logLevel: 'debug'
}
))
app.use('/some', proxy(
{
target: 'https://example.org:7324/',
secure: false,
changeOrigin: true,
logLevel: 'debug'
}
))
app.use(proxy('/.*',
{
target: 'example.org:8452/',
secure: false,
changeOrigin: true,
logLevel: 'debug'
}
))
}
I am using WebStorm IDE and created my angularJS project. I am also using grunt, and am using grunt-contrib-jshint. I had some options preconfigured in my .jshintrc file which were already in the angular-seed repository I used to create the project:
{
"strict": "global",
"node": true,
"globals": {
// Angular
"angular": false,
// Angular mocks
"module": false,
"inject": false,
// Jasmine
"jasmine": false,
"describe": false,
"beforeEach": false,
"afterEach": false,
"it": false,
"expect": false,
// Protractor
"browser": false,
"element": false,
"by": false
}
}
When I run grunt jshint on terminal, I get many errors, all of them related to the errors which arise when options are not set properly. However, when I copy these options and put them in my Gruntfile, everything works like a charm.
jshint: {
files: ['Gruntfile.js', 'app/**/*.js'],
options: {
// options here to override JSHint defaults
node: true,
globals: {
// Angular
angular: false,
// Angular mocks
module: false,
inject: false,
// Jasmine
jasmine: false,
describe: false,
beforeEach: false,
afterEach: false,
it: false,
expect: false,
// Protractor
browser: false,
element: false,
by: false
}
}
},
Basically, what I've understood is jshint is not reading options from the .jshintrc file. How do I solve this issue?
Set the option jshintrc for your jshint task to true.
If set to true, no config will be sent to JSHint and JSHint will search for .jshintrc files relative to the files being linted.
I have a protractor test script file that looks like this:
var TestPage = function () {
this.detailsTab = element(by.id('detailsTab'));
..
It's giving me a lot of errors saying element and by are not defined. Is there a way I can stop all these hint errors from appearing?
From the protractor tutorial page you can see that these globals are created by Protactor:
This uses the globals element and by, which are also created by
Protractor.
So you need a way of telling JSHint about these globals. You can do this in your configuration for JSHint. http://www.jshint.com/docs/
Inline Configuration Method
One of the ways JSHint can be configured is by using adding special inline comments. Below is an excerpt taken from the JSHint docs page that describes how to specify global using the inline comment configuration method.
globals - A directive for telling JSHint about global variables that are defined
elsewhere. If value is false (default), JSHint will consider that
variable as read-only. Use it together with the undef option.
/* global MY_LIB: false */
Update: So for protractor the inline config would be:
/* global element */
/* global by */
or as suggested by #runTarm this condensed syntax will also work:
/* global element, by */
Config File Method
You can also configure JSHint by using configuration files. Check the documentation for the different ways to specify the config file. From the docs page we the following excerpt that explains how to write the file to specify a global variable.
Configuration file is a simple JSON file that specifies which JSHint
options to turn on or off. For example, the following file will enable
warnings about undefined and unused variables and tell JSHint about a
global variable named MY_GLOBAL.
{
"undef": true,
"unused": true,
"predef": [ "MY_GLOBAL" ]
}
Here is an example .jshint file with the globals being removed:
{
"node": true,
"browser": true,
"esnext": true,
"bitwise": true,
"camelcase": true,
"curly": true,
"eqeqeq": true,
"immed": true,
"indent": 4,
"latedef": true,
"newcap": true,
"noarg": true,
"quotmark": "single",
"undef": true,
"unused": true,
"strict": true,
"trailing": true,
"smarttabs": true,
"multistr": true,
"globals": {
"after": false,
"afterEach": false,
"angular": false,
"before": false,
"beforeEach": false,
"browser": false,
"describe": false,
"expect": false,
"inject": false,
"it": false,
"jasmine": false,
"spyOn": false,
"Kinetix": false,
"$": false
}
}
the actual .jshintrc configuration for protractor
if you want to get rid of jshint warnings for protractor, updating .jshintrc is the best approach. adding global overrides per file is rather tedious.
add the following to your .jshintrc file (you should be able to add a .jshintrc file in the directory that contains your tests rather than the root/all of your source)
.jshintrc:
{
... your other jshint stuff ...
"jasmine": true,
"mocha": true,
"globals": {
"angular": false,
"browser": false,
"inject": false,
"_": false,
"driver": false,
"protractor": false,
"browser": false,
"$": false,
"$$": false,
"element": false,
"by": false,
"list": false
}
}
what this does: (you may not need jasmine/mocha depending on how you wrote your tests)
jasmine is required for things like expect
mocha is required for things like beforeEach -
the globals are other things that protractor defines on as globals - see https://github.com/angular/protractor/blob/master/lib/runner.js#L152