Setting up Vue CLI 4 for optimal development: Integrating ESLint, Prettier, Airbnb rules, TypeScript, and Vetur

When starting a new project using Vue CLI v4.0.5 and selecting options for TypeScript and Linter / Formatter, you will be presented with pre-configured choices for linting and formatting:

? Choose a linter / formatter configuration: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb configuration
  ESLint + Standard configuration
  ESLint + Prettier
  TSLint (deprecated)

I prefer to use the Airbnb rules for ESLint along with Prettier for automatic formatting upon saving, utilizing the TypeScript parser and Vue CLI v4.

These setups should also integrate seamlessly with the Vetur extension for VS Code.

Is there a guide on how to set up this combination of tools?

Please note that this question is unique as it pertains specifically to configuring Vue CLI4, TypeScript, ESLint, Airbnb, Prettier, and compatibility with Vetur / VS Code.

UPDATE 2020/02 - Due to significant changes in the requirements, I have created a new question and provided an answer myself: How to configure Vue CLI 4 with ESLint + Airbnb rules + TypeScript + Stylelint for SCSS, in VS Code editor with autofix on save?

typescriptvue.jseslintvue-cliprettier

Answer №1

In order to ensure that your project works properly, follow these steps as outlined in a blog post [1]:

  1. Start by downloading the ESLint and Prettier extensions for VSCode.

  2. Next, install the ESLint and Prettier libraries into your project. Navigate to your project’s root directory and run the following command:

npm install -D eslint prettier
  1. Now, install the Airbnb config. For npm 5+ users, there is a shortcut available to install the config along with all its dependencies:
npx install-peerdeps --dev eslint-config-airbnb
  1. Install eslint-config-prettier (which disables formatting for ESLint) and eslint-plugin-prettier (which allows ESLint to display formatting errors in real-time)
npm install -D eslint-config-prettier eslint-plugin-prettier
  1. Create a .eslintrc.json file in your project’s root directory:
{
  "extends": ["airbnb", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"]
  },
}
  1. Establish a .prettierrc file in the project’s root directory to configure the formatting settings. Below are some example preferences, but it's recommended to explore more about the Prettier config file:
{
  "printWidth": 100,
  "singleQuote": true
}
  1. Lastly, ensure that Prettier automatically formats on save by adding "editor.formatOnSave": true to your User Settings in VSCode.

[1]

Answer №2

As of now, it appears that Vetur does not support typed completion for props in Single File Components (SFC). Due to this limitation, we have opted to utilize JSX with Typescript in combination with Vue, Eslint, and AirBnB standards in our workplace.

(I also reached out to you in the #tooling Discord channel dedicated to Vue discussions)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating formGroups dynamically within an ngFor loop inside an accordion

I am facing a challenge with an accordion feature that generates a specified number of sections x based on user input. Here is an example: https://i.sstatic.net/QjmkW.png After creating the sections, I need to load employee information into each section ...

angulartypescriptionic-framework

Typescript defines types for parameters used in callbacks for an event bus

Encountering a TypeScript error with our custom event bus: TS2345: Argument of type 'unknown' is not assignable to parameter of type 'AccountInfo | undefined'. Type 'unknown The event bus utilizes unknown[] as an argument for ca ...

typescriptevent-bus

The argument labeled as 'State' cannot be assigned to a parameter labeled as 'never'

I've recently delved into using TypeScript with React. I attempted to incorporate it with the React useReducer hook, but I hit a roadblock due to an unusual error. Below is my code snippet: export interface ContractObj { company: string; ...

javascriptreactjstypescriptreact-hooks

Execute the React Native application on Windows by using the command npx react-native run-windows

I recently created a test application using React Native by running npx react-native init Test --template react-native-template-typescript (https://reactnative.dev/docs/typescript). Everything seemed to be working fine, but I encountered an issue where the ...

typescriptwindowsreact-nativedevelopment-environment

Using React and Typescript, implement an Ant Design Table that includes a Dropdown column. This column should pass

Next Row: { title: "Adventure", render: (item: ToDoItem) => { //<- this item return ( <Dropdown overlay={menu}> <Button> Explore <DownOutlined /> </Button> </Dropdown&g ...

javascriptreactjstypescriptantd

AngularTS - Using $apply stops the controller from initializing

Every time I launch the application, the angular {{ }} tags remain visible. Removing $scope.$apply eliminates the braces and displays the correct value. I am utilizing Angular with Typescript. Controller: module Application.Controllers { export class Te ...

angularjstypescript

The Vue JS Option element requires the "selected" attribute to be utilized as a property instead

I'm attempting to automatically have an option selected if the "selected" property is present on the option object. Here is my code snippet: <template> <select v-model="model" :placeholder="placeholder"> <option v-for="opt ...

javascriptvue.js

No invocation of 'invokeMiddleware' was suggested

Encountered this specific issue when setting up loopback4 authentication. constructor ( // ---- INSERT THIS LINE ------ @inject(AuthenticationBindings.AUTH_ACTION) protected authenticateRequest: AuthenticateFn, ) { super(authen ...

typescriptloopback4

Potentially null object is present in a callback

The code I have is as follows: let ctx = ref.current.getContext("2d"); if(ctx){ ctx.lineWidth=1; // this line executes without errors ctx.strokeStyle=props.barStroke??"darkgray";// this line execut ...

typescript

The movement of particles in tsparticles experiences interruptions when built in React, causing defects in their motion or noticeable stutter and lag

The performance is flawless in development mode with npm run start, but once deployed and running the production build (npm run build), there seems to be a disturbance in particle movement or a drastic decrease in speed. Despite experimenting with all ava ...

reactjstypescriptnpmparticles

Oops! Looks like we've encountered a bit of a snag: HttpClient provider is missing

I am currently facing an issue with my code in Testing.ts file. Below is the code segment from Testing.ts: let injector = ReflectiveInjector.resolveAndCreate([ TestService ]) var myInstance = new myTest(injector.get(TestService)); The TestService.ts ...

node.jsangulartypescript

Property '{}' is not defined in type - Angular version 9.1.1

Currently, I am working with Angular CLI version 9.1.1 and I am attempting to update certain data without updating all of it. form: UserInfo = {adresse : {}}; UserInfo.interface export interface UserInfo { id_user: string; username: string; em ...

javascriptangulartypescriptforms

Tips for updating the background color of a single date cell in ngb-datepicker using Angular

Recently, I started using ngb-datepicker and I'm curious if it's possible to customize the background-color of a specific day, like the 8th of November. HTML <ngb-datepicker name="dp" [(ngModel)]="model" ngbDatepicker [dayTemplate]="customDa ...

cssangulartypescriptdatepicker

Using Jest and TypeScript to mock the return value of react-oidc-context

For our project, we utilize react-oidc-context to handle user authentication using oidc-client-ts under the hood. The useAuth function provided by react-oidc-context gives us access to important information such as isAuthenticated, isLoading, and the auth ...

typescriptjestjsreact-oidc-contextoidc-client-ts

Using Rxjs to dynamically map values from an array with forkJoin

Greetings! I have a collection of Boolean observables and would like to apply a logical AND operation. Currently, I am passing static values 'a' and 'b', but I am unsure of the number of elements in the totalKeys array. import { forkJoi ...

javascriptangulartypescriptrxjsjavascript-objects

Angular 13 does not currently have support for the experimental syntax 'importMeta' activated

Since upgrading to angular 13, I've encountered an issue while attempting to create a worker in the following manner: new Worker(new URL('../path/to/worker', import.meta.url), {type: 'module'}) This code works as expected with "ng ...

javascriptangulartypescriptwebpack

Unveiling the secrets of using VueJS modifiers in PUG

Can you provide guidance on using modifiers with Pug? I attempted the following: my-component(:options.sync="addresses") my-component(':options.sync'="addresses") Both resulted in a syntax error, unexpected token. my-component(:options="addr ...

vue.jsvuejs2pug

Utilizing Tweakpane for Debugging in a Vue Three.js Starter Template Project

Currently, I am utilizing the THRE-BOILER-TEMPLATE, a Vue.js and Three.js boilerplate, and I have a goal of incorporating a debugging UI using Tweakpane. With the unique architecture of this boilerplate being labeled as "the best," my interest lies in dete ...

vue.jsthree.js

Vue.js does not apply the "selected" attribute to set the HTML <option> tag to default

Trying to designate a default <option> tag from the available options. Utilizing v-model on the <select> tag, the vue.js documentation indicates the following approach: v-model will disregard the ... selected attributes present on form ele ...

javascripthtmlvue.jsv-modelselect-options

How do I correctly submit a Vue.js application to GitHub?

After attempting to upload my files to Github, I received an error message stating that the files were too large. As a workaround, I uploaded only the content of the dist folder after building for production. Although this method worked, it is not very p ...

vue.jsgithubupload