Category: JavaScript

Categories
JavaScript Answers Vue Vue Answers

How to Set Up ESLint and Prettier in Vue.js 3 Projects and Format Code Automatically with Prettier with VS Code?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to set up ESLint and Prettier in Vue.js projects and format code automatically with Prettier with VS Code.

In this article, we’ll look at how to set up ESLint and Prettier in Vue.js projects and format code automatically with Prettier with VS Code.

How to Set Up ESLint and Prettier in Vue.js Projects and Format Code Automatically with Prettier with VS Code?

To set up ESLint and Prettier in Vue.js projects and format code automatically with Prettier with VS Code, we install a few packages and VS Code extensions and change a few settings.

First, we install a few packages into our Vue project by running:

npm i -D babel-eslint eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-prettier

We install the ESLint with plugins for Vue projects.

Then we install extensions by pressing ctrl+shift+p in VS Code and search for ‘Extensions: Install Extension’.

Next, in the extensions search box on the left, we search for Prettier, ESLint, and Vetur and install them by clicking install.

After that, we press ctrl+shift+p in VS Code and search for ‘Preferences: Open Settings (JSON).

And then we paste the following into settings.json:

{
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "files.eol": "\n",
  "files.trimTrailingWhitespace": true,
  "editor.renderControlCharacters": false,
  "editor.renderWhitespace": "none",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features",
    "editor.formatOnSave": true
  },
  "[scss]": {
    "editor.defaultFormatter": "sibiraj-s.vscode-scss-formatter",
    "editor.formatOnSave": true
  },
  "typescript.updateImportsOnFileMove.enabled": "always",
  "html.format.wrapLineLength": 80,
  "files.insertFinalNewline": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "editor.formatOnSave": true,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "editor.tabSize": 2,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[python]": {
    "editor.formatOnType": true
  },
  "extensions.ignoreRecommendations": true,
  "vue.codeActions.savingTimeLimit": 2000
}

to enable auto formatting and linting of Vue projects.

Finally, we create an .eslintrc.js file in the Vue project’s root and add:

module.exports = {
  root: true,
  env: {
    node: true,
    es2022: true,
  },
  extends: ["eslint:recommended", "plugin:vue/vue3-recommended", "prettier"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
};

into the file to enable the extensions needed for auto linting and formatting.

Conclusion

To set up ESLint and Prettier in Vue.js projects and format code automatically with Prettier with VS Code, we install a few packages and VS Code extensions and change a few settings.

Categories
JavaScript Answers

How to retrieve the position (X,Y) of an HTML element with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to retrieve the position (X,Y) of an HTML element with JavaScript.

In this article, we’ll look at how to retrieve the position (X,Y) of an HTML element with JavaScript.

How to retrieve the position (X,Y) of an HTML element with JavaScript?

To retrieve the position (X,Y) of an HTML element with JavaScript, we use the getBoundingClientRect method.

For instance, we write

const { top, right, bottom, left } = element.getBoundingClientRect();
console.log(top, right, bottom, left);

to call the element.getBoundingClientRect method to return the position of the element.

We get the top, right, bottom, and left position from the object returned.

Conclusion

To retrieve the position (X,Y) of an HTML element with JavaScript, we use the getBoundingClientRect method.

Categories
Angular Answers

How to add a conditional class with Angular *ngClass and JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to add a conditional class with Angular *ngClass and JavaScript.

In this article, we’ll look at how to add a conditional class with Angular *ngClass and JavaScript.

How to add a conditional class with Angular *ngClass and JavaScript?

To add a conditional class with Angular *ngClass and JavaScript, we can use the class or ngClass attributes.

For instance, we write

<div [class.my_class]="step === 'step1'"></div>

to set the my_class class when step equals 'step1'.

We can also write

<div [ngClass]="{ my_class: step === 'step1' }"></div>

to do the same thing.

Conclusion

To add a conditional class with Angular *ngClass and JavaScript, we can use the class or ngClass attributes.

Categories
JavaScript Answers

How to check if an element contains a class in JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to check if an element contains a class in JavaScript.

In this article, we’ll look at how to check if an element contains a class in JavaScript.

How to check if an element contains a class in JavaScript?

To check if an element contains a class in JavaScript, we use classList.

For instance, we write

const hasClassName = element.classList.contains(className);

to check if the className class exists in the element with classList.contains.

Conclusion

To check if an element contains a class in JavaScript, we use classList.

Categories
JavaScript Answers

How to get div height with plain JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to get div height with plain JavaScript.

In this article, we’ll look at how to get div height with plain JavaScript.

How to get div height with plain JavaScript?

To get div height with plain JavaScript, we use the clientHeight or offsetHeight properties.

For instance, we write

const clientHeight = document.getElementById("myDiv").clientHeight;
const offsetHeight = document.getElementById("myDiv").offsetHeight;

to get the div with getElementById.

Then we get the div’s height with the clientHeight and offsetHeight properties.

clientHeight includes the padding with the height.

And offsetHeight includes padding, scrollbar and border heights.

Conclusion

To get div height with plain JavaScript, we use the clientHeight or offsetHeight properties.