I'm new to ASP.NET and using WebCompiler to compile my SCSS, so it compiles whenever main.scss is saved using the JSON below that is generated by the WebCompiler. My problem is whenever I save something on the any other .SCSS file it does not compile and I have to go back to main.scss and save that specific file in order to compile my code.
Is there any way to run my JSON compiler automatically whenever I save my project?
[
{
"outputFile": "wwwroot/css/Styles/stylescompiled.scss",
"inputFile": "wwwroot/css/Styles/main.scss",
"minify": { "enabled": true },
"includeInProject": true
},
{
"outputFile": "wwwroot/css/style.css",
"inputFile": "wwwroot/css/Styles/stylescompiled.scss",
"options": { "sourceMap": true },
"includeInProject": true
},
{
"outputFile": "wwwroot/css/style.css",
"inputFile": "wwwroot/css/Styles/main.scss",
"options": { "sourceMap": true },
"minify": { "enabled": true },
"includeInProject": true
}
]
Related
My Angular tsconfig does not detect my Cypress 12.3 types. I've tried all kinds of things to get this working, short of starting my Cypress project over (which I suspect would work).
My code runs fine but I cannot resolve this situation pictured here in my IDE:
At the moment, my cypress/tsconfig.json looks like this:
{
"extends": "../tsconfig.spec.json",
"files": [
"../cypress/**/*.ts",
"../cypress.config.ts",
"../node_modules/cypress"
],
"compilerOptions": {
"sourceMap": false,
"types": ["cypress", "node", "jasmine-expect", "chai"]
}
}
The above config is trying to prefer jasmine expect type over chai expect, which I REQUIRE.
Ok, I found the solution. Must be careful about using files rather than include/exclude:
{
"extends": "../tsconfig.spec.json",
"include": [
"**/*.ts",
"../cypress.config.ts",
"../node_modules/cypress"
],
"exclude": [
"../src/**/*.ts"
],
"compilerOptions": {
"sourceMap": false,
"types": ["cypress", "node", "jasmine-expect"]
}
}
In my react project the code quality checker CodeClimate, using advanced configuration just stop some silly code quality factors/thresholds like 50 line of code, :
Function `AutocompleteCombobox` has 50 lines of code (exceeds 25 allowed). Consider refactoring.
what I did I create .codeclimate.yml besides my package.json and upload that to the repo (connected with CodeClimate on branch DEV), following documentation.
this is the example of the .yml file:
version: "2" # required to adjust maintainability checks
checks:
argument-count:
enabled: true
config:
threshold: 4
complex-logic:
enabled: true
config:
threshold: 4
The Question is: CodeClimate doesn’t changes the records and metrics based on my configuration file!! I CHANGED THE RECORDS via .yml file; but still not updated on CodeClimate website ?!! the metrics are same as default.
*** TIP: Nothing to do from CodeClimate website settings we stop every condition, nothing apply except default! and I don’t want to delete and re-add the repo's because I'ill lose my tracking records in enhancement.
The problem is simple, the server make file called .codeclimate.json because I edit the configurations via the website, but in my repo I made I file called .codeclimate.yml, when I convert the configuration from .yml to .json I override the one on the server that works perfectly.
Example for may configuration .codeclimate.json:
{
"version": "2",
"checks": {
"argument-count": {
"enabled": false,
"config": {
"threshold": 4
}
},
"complex-logic": {
"enabled": true,
"config": {
"threshold": 15
}
},
"file-lines": {
"enabled": false,
"config": {
"threshold": 250
}
},
"method-complexity": {
"enabled": true,
"config": {
"threshold": 15
}
},
"method-count": {
"enabled": false,
"config": {
"threshold": 20
}
},
"method-lines": {
"enabled": false,
"config": {
"threshold": 25
}
},
"nested-control-flow": {
"enabled": true,
"config": {
"threshold": 4
}
},
"return-statements": {
"enabled": true,
"config": {
"threshold": 4
}
},
"similar-code": {
"enabled": false,
"config": {
"threshold": null
}
},
"identical-code": {
"enabled": true,
"config": {
"threshold": null
}
}
},
"exclude_patterns": [
"config/",
"db/",
"dist/",
"features/",
"**/node_modules/",
"script/",
"**/spec/",
"**/test/",
"**/tests/",
"Tests/",
"**/vendor/",
"**/*_test.go",
"**/*.d.ts"
]
}
If you face the same issue probably the configuration is duplicated on CodeClimate, you need to use one file only.
I have followed this guide to set up .eslintrc configuration.
https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/README.md
I have also enabled ESLint in Visual Studio by following this guide:
https://stackoverflow.com/a/44458832/3850405
My problem is that I want to use a project specific config instead of the Global ESLint Config.
The guide sets up a .eslintrc.js file so I tried to switch to a file that had the same structure as C:\Users\Oscar\.eslintrc.
Tried placing the .eslintrc in the root folder of the solution, project and in my ClientApp folder but nothing got picked up. Is it possible to use a project specific ESLint config in Visual Studio and receive build errors/warnings?
Running the command npx eslint . --ext .js,.jsx,.ts,.tsx gives me correct errors but Visual Studio shows no errors.
.eslintrc:
{
"root": true,
"parser": "#typescript-eslint/parser",
"plugins": [
"#typescript-eslint",
"jest"
],
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/recommended",
"plugin:jest/recommended",
"plugin:react/recommended"
],
"env": {
"browser": true,
"node": true,
"jest/globals": true
},
"rules": {
"no-console": [
"error",
{ "allow": [ "warn", "error" ] }
]
}
}
I was able to get ESLint in Visual Studio 2019 to use a configuration file that I had in the root of my project.
The file is called ".eslintrc.json". Here is the contents of the file so far:
{
"extends": "eslint:recommended",
"globals": {
"kendo": "readonly"
},
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"jquery": true
},
"rules": {
"no-prototype-builtins": "off",
"no-unused-vars": [
"error",
{ "args": "none" }
]
}
}
One thing I noticed is that I had close and re-open Visual Studio after adding the file before it would start working. Once I did that changes I made to the file would take effect immediately.
I am trying to compile my ES6+ code to vanilla js using Grunt task runner.
I have purposely chosen Grunt over webpack and gulp because I just wanted to minify my js files.
I have successfully compiled my ES6 code to vanilla after running the code got an error saying generatorRuntime is not defined. After analysing the issue I could that my async and await code is giving the issue after it gets converted to vanilla js.
I have my code snippet of my gruntfile.js and package.json.
babel: {
options: {
sourceMap: true
},
dist: {
files: [{
"expand": true,
"cwd": "./htdocs/js/src",
"src": ["**/*.js"],
"dest": "./htdocs/js/compiled/",
"ext": ".js"
}]
}
},
//uglify will minify all the js files in js/src folder.
uglify: {
all_src : {
options : {
sourceMap : true
},
files: [{
expand: true,
flatten: true,
cwd:'./htdocs/js/compiled',
src: '**/*.js',
dest: './htdocs/js/dist',
ext: '.min.js'
}]
}
}
grunt.loadNpmTasks('grunt-babel');
grunt.loadNpmTasks('grunt-contrib-uglify');
Package.json
"devDependencies": {
"babel-core": "^6.26.3",
"babel-preset-latest": "^6.24.1",
"grunt": "^1.1.0",
"grunt-babel": "^7.0.0",
"grunt-cli": "^1.3.2",
"grunt-contrib-uglify": "^4.0.1"
},
"babel": {
"presets": [
"latest"
]
}
That's probably because the polyfills aren't getting shipped in your bundle. In your babel.options object inside Gruntfile, you can set
presets: [['#babel/preset-env', { useBuiltIns: 'usage', corejs: 3 }]]
and don't forget to include corejs as dependency in your project.
npm install core-js --save
What's the simplest folder structure I can use with Nightwatchjs? It will be used locally and for continuous integration. Currently I can't even get the demo to work. I have six errors:
module.js:469:15
module.js:417:25
bootstrap_node.js:604.10
bootstrap_node.js:394:7
bootstrap_node.js:149:9
bootstrap_node.js:509:3.
I realize this is a beginner question. I've been using Telerik and TestComplete for a few years and now we want to do CI properly so Selenium is the way to go. I'm comfortable with javascript but kind of bad at file path stuff.
What's the simplest folder structure I can use with Nightwatchjs?
The simplest NightwatchJS folder structure is:
To have 2 files (a configuration file and a file which contain you tests):
nightwatch.json
app.js (you can rename it as you want)
Example
1) nightwatch.json
{
"src_folders": [
"app.js"
],
"live_output": false,
"tests_output": "test/tests_output/",
"detailed_output": true,
"selenium": {
"start_process": false,
"host": "hub.browserstack.com",
"port": 80
},
"test_workers": {
"enabled": false,
"workers": "auto"
},
"test_settings": {
"chrome": {
"selenium_port": 80,
"selenium_host": "hub.browserstack.com",
"silent": true,
"desiredCapabilities": {
"os": "Windows",
"os_version": "10",
"browserName": "chrome",
"resolution": "1024x768",
"javascriptEnabled": true,
"acceptSslCerts": true,
"browserstack.video": "true",
"browserstack.debug": "true",
"browserstack.user": "<yourUsername>",
"browserstack.key": "<yourPassword>"
}
}
}
}
2) app.js
module.exports = {
'Does-stackoverflow-works': function (browser) {
browser
.url("http://stackoverflow.com/questions")
.waitForElementPresent('body', 2000, "Display latest Stackoverflow questions")
.end()
}
};
Run
$> nightwatch --env chrome
Output