Vue+Typescript+Eslint+Prettier project setup

Preface

After the [basic ESLint+Prettier]() setup, let’s look at how to add settings in a Vue3+Typescript project.

Setup using vue-cli

When using vue-cli to initialize a project, it asks which lint setup you want to use. The two main options are usually ESLint+Airbnb and ESLint+Prettier.

For the config option that follows, try to choose a standalone JS config file. If you choose In package.json, the ESLint config will be written into the package.json file — which is a bit messy and also doesn’t allow comments.

Using eslint+airbnb, how to manually add prettier

In .eslintrc.js at the project root, you can see vue-cli has filled in some default settings for you. From here, you can apply the previous ESLint+Prettier setup directly:

• Install the related npm dependencies

  npm i -D eslint-config-prettier  eslint-plugin-prettier prettier
  

• In .eslintrc.js, add the following as the last item in extends

  extends:[
      ..., // other extends
      'prettier'
  ]
  

  to override settings that conflict with prettier

Using eslint + prettier, how to customize the format you want

After project initialization, you can see Prettier-related settings have already been installed by default, which uses the officially recommended rules for formatting. However, if you want to add your own Prettier settings, you’ll need to append prettier after extends to override the default settings.

In that case, you’ll need to manually install eslint-config-prettier to resolve the conflicts between ESLint and Prettier; then you can add your own .prettierrc to set up the format rules!

ESLint rule setup

assignment to property of function parameter “state” If you’re using Eslint+Airbnb together with Vuex for state management in your project, you may see the ESLint error assignment to property of function parameter "state" inside your store. The reason is that Airbnb’s ESLint rules include no-param-reassign, which restricts modifying parameters passed into a function, since doing so could cause the parameter object’s properties to be overwritten:

// bad case
function f1(obj){
	obj.key = 1;
}

//good case
function f1(obj){
	const key = Object.prototype.hasOwnProperty.call(obj, 'key')? obj.key : 1;
}

But in the Vuex case, you do modify state:

const store = createStore({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

So you can update the ESLint rule:

...// other settings
rules:{
	"no-param-reassign":[
		"error",{
			"prop":true,
			"ignorePropertyModificationsFor":[
				"state"
			]
		}
	]
}

This way, the conflict between Vuex and ESLint is avoided.

Full .eslintrc.js

module.exports = {
    root: true,
    env: {
        browser: true,
        node: true,
        es6: true
    },
    plugins: ['simple-import-sort'],
    extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/typescript/recommended', 'prettier'],
    parser: 'vue-eslint-parser',
    parserOptions: {
        parser: '@typescript-eslint/parser',
        ecmaVersion: 2020,
        sourceType: 'module',
        ecmaFeatures: {
            jsx: true
        }
    },
    rules: {
        '@typescript-eslint/no-var-requires': 0,
        'no-useless-escape': 0,
        'vue/html-indent': 'error',
        'sort-imports': 'off',
        'import/order': 'off',
        'simple-import-sort/imports': 'error',
        'simple-import-sort/exports': 'error',
        'no-param-reassign': [
            'error',
            {
                prop: true,
                ignorePropertyModificationsFor: ['state']
            }
        ]
    }
};

ChangeLog

• 20220911 - init
• 20260501–translate by claude code

• ← Previous Post
• Next Post →