Browse Source

[Tooling] VSCode Debug configurations and project settings (#705)

* configure tasks

* configure VSCode debugging

* adjust VSCode project settings

* fix bdd

* fix cypress path on macos/linux

* enforce checkJs

* make buildAndWatch default build task

* recommend and configure mocha-sidebar

* tune settings
pull/714/head
Konstantin Vyatkin 2 years ago
committed by Josh Johnson
parent
commit
92d5e49fb6
  1. 4
      .prettierrc.js
  2. 13
      .prettierrc.json
  3. 8
      .vscode/extensions.json
  4. 70
      .vscode/launch.json
  5. 58
      .vscode/settings.json
  6. 87
      .vscode/tasks.json
  7. 14
      jsconfig.json
  8. 5
      webpack.config.dev.js

4
.prettierrc.js

@ -1,4 +0,0 @@
module.exports = {
singleQuote: true,
trailingComma: "all"
}

13
.prettierrc.json

@ -0,0 +1,13 @@
{
"singleQuote": true,
"trailingComma": "all",
"overrides": [
{
"files": ["*.svg"],
"options": {
"parser": "html",
"htmlWhitespaceSensitivity": "ignore"
}
}
]
}

8
.vscode/extensions.json

@ -2,12 +2,16 @@
// See http://go.microsoft.com/fwlink/?LinkId=827846
// for the documentation about the extensions.json format
"recommendations": [
// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
// we enforce ESLint rules, so, recommend extension
"dbaeumer.vscode-eslint",
// we use prettier, so, recommend extension
"esbenp.prettier-vscode",
// we are on GitHub, so, recommend extension
"github.vscode-pull-request-github"
"github.vscode-pull-request-github",
// needed for our configured debug configuration with Chrome
"msjsdiag.debugger-for-chrome"
// Mocha recommended - https://mochajs.org/#mocha-sidebar-vs-code,
// but it's buggy
// "maty.vscode-mocha-sidebar"
]
}

70
.vscode/launch.json

@ -0,0 +1,70 @@
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"preLaunchTask": "buildAndWatch",
"url": "http://localhost:3001",
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"webpack://Choices/*": "${workspaceFolder}/*"
}
},
{
"type": "node",
"request": "launch",
"name": "Mocha Current File",
"program": "${workspaceFolder}/node_modules/mocha/bin/mocha",
"args": ["-u", "bdd", "--timeout", "999999", "--colors", "${file}"],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"env": {
"NODE_ENV": "test"
}
},
{
"type": "node",
"request": "launch",
"name": "Mocha All",
"program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
"args": ["-u", "bdd", "--timeout", "999999", "--colors"],
"console": "integratedTerminal",
"internalConsoleOptions": "openOnSessionStart",
"env": {
"NODE_ENV": "test"
}
},
{
"type": "node",
"request": "launch",
"name": "Cypress Current File",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/cypress",
"windows": {
"runtimeExecutable": "${workspaceFolder}\\node_modules\\.bin\\cypress.cmd"
},
"runtimeArgs": [
"run",
"--headed",
"--no-exit",
"--browser=electron",
"--port",
"9898",
"--spec"
],
"protocol": "legacy",
"port": 9898,
"program": "${file}",
"console": "integratedTerminal",
"preLaunchTask": "buildAndWatch",
"internalConsoleOptions": "openOnSessionStart",
"timeout": 999999999999999,
"autoAttachChildProcesses": false,
"env": {
"NODE_ENV": "test"
// "DEBUG": "cypress:*"
}
}
]
}

58
.vscode/settings.json

@ -1,5 +1,61 @@
{
"eslint.enable": true,
// prevent watch task failures on lint errors
"eslint.autoFixOnSave": true,
"editor.formatOnSave": true,
// switch off default VSCode formatting rules
"javascript.format.enable": false,
// Javascript prettier runs via ESLint
"prettier.disableLanguages": ["javascript"]
"prettier.disableLanguages": ["javascript"],
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"search.exclude": {
"**/node_modules": true,
"public/assets": true,
"**/coverage": true
},
// Mocha Sidebar settings
"mocha.env": {
"NODE_ENV": "test"
},
"mocha.files.glob": "src/scripts/**/*.test.js",
"mocha.requires": ["@babel/register", "./config/jsdom.js"],
// for Windows collaborators
"files.eol": "\n",
"files.encoding": "utf8",
// associations for some files this project is using
"files.associations": {
".browserslistrc": "gitignore",
".huskyrc": "jsonc",
".npmrc": "ini"
},
// We use NPM as package manager
"npm.packageManager": "npm",
"npm.autoDetect": "on",
"npm.fetchOnlinePackageInfo": true,
"eslint.packageManager": "npm",
"json.schemas": [
// Cypress related settings - https://docs.cypress.io/guides/tooling/intelligent-code-completion.html#Features-1
{
"fileMatch": ["cypress.json"],
"url": "https://on.cypress.io/cypress.schema.json"
},
// Husky config file
{
"fileMatch": [".huskyrc"],
"url": "http://json.schemastore.org/huskyrc"
},
// Prettier config
{
"fileMatch": [".prettierrc.json"],
"url": "http://json.schemastore.org/prettierrc"
}
]
}

87
.vscode/tasks.json

@ -0,0 +1,87 @@
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"label": "buildAndWatch",
"script": "js:watch",
"group": {
"kind": "build",
"isDefault": true
},
"isBackground": true,
"presentation": {
"echo": true,
"reveal": "always",
"focus": false,
"panel": "dedicated",
"showReuseMessage": true,
"clear": false
},
"problemMatcher": [
"$eslint-stylish",
{
"owner": "webpack",
"fileLocation": "absolute",
"pattern": [
{
"regexp": "^Module build failed \\(from (\\.+)\\)",
"file": 1,
"line": 2,
"column": 3
},
{
"regexp": "\\s*TS\\d+:\\s*(.*)",
"message": 1
}
],
"severity": "error",
"source": "webpack",
"background": {
"activeOnStart": true,
"beginsPattern": "^Listening at",
"endsPattern": "Compiled successfully\\."
}
}
]
},
{
"type": "npm",
"script": "css:build",
"group": "build",
"problemMatcher": ["$node-sass"]
},
{
"type": "npm",
"script": "lint",
"problemMatcher": ["$eslint-stylish"]
},
{
"type": "npm",
"script": "build",
"group": "build"
},
{
"type": "npm",
"script": "test",
"group": "test"
},
{
"type": "npm",
"script": "test:e2e",
"group": "test"
},
{
"type": "npm",
"script": "test:unit",
"group": "test"
},
{
"type": "npm",
"script": "cypress:open",
"isBackground": true
}
]
}

14
jsconfig.json

@ -1,9 +1,15 @@
{
"compilerOptions": {
"strict": true,
"baseUrl": "../node_modules",
"checkJs": true,
"target": "es2020",
"lib": ["es5", "dom"],
"types": ["cypress"]
"lib": ["esnext", "dom"],
"types": ["cypress"],
"strict": true,
/* Additional Checks */
"noImplicitAny": false,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true
}
}

5
webpack.config.dev.js

@ -5,16 +5,17 @@ const baseConfig = require('./webpack.config.base');
module.exports = deepMerge(
baseConfig,
{
/** @type {import('webpack').Configuration} */ ({
mode: 'development',
output: {
path: path.resolve(__dirname, './public'),
filename: 'choices.min.js',
publicPath: 'http://localhost:3001/assets/scripts/',
},
devtool: 'source-map',
entry: ['webpack/hot/dev-server', 'webpack-hot-middleware/client'],
plugins: [new HotModuleReplacementPlugin()],
},
}),
{
arrayMerge(target, source) {
return [...source, ...target];

Loading…
Cancel
Save