Vue+Typescript+Eslint+Prettier專案設置

前言

既[基本Eslint+Prettier]()設定之後，就要來看一下在Vue3+Typescript的專案中該如何添加設定。

使用vue-cli的設定

使用vue-cli來初始化專案時，就會詢問我們想要使用什麼lint，而通常最主要就是看ESLint+Airbnb和ESLint+Prettier

而隨後的config選項，盡量選獨立的js config file；如果是選In package.json，eslint的設置會寫在package.json檔裡，一是會有點亂、二是沒辦法寫註解。

使用 eslint+airbnb，如何手動加prettier

在根目錄下的.eslintrc.js中，可以看到vue-cli幫忙寫入一些預設的設定；再來就可以將之前的 ESLint+Prettier 設定直接應用：

• 載入相關的npm dependency

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

• 在.eslintrc.js 中的 extends最後一項加上

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

  用來覆蓋跟prettier衝突的設定

使用 eslint + prettier，如何自定義想要的format

在初始化專案之後，可以看到已經默認安裝了Prettier的相關設定， 這時便是用官方推薦的規則來做format。然而，如果想要增加自己的prettier設定，就必須在extends後面再新增prettier來覆蓋掉默認的設定。

此時，就必須自己手動安裝一下eslint-config-prettier來解決ESLint和Prettier的衝突問題；然後就可以自己新增 .prettierrc來設定format規則啦！

eslint的rule設置

assignment to property of function parameter “state” 如果是用Eslint+Airbnb、同時專案中有使用Vuex做state狀態管理的話，可能會看到在store裡面會報assignment to property of function parameter "state"的ESLint錯誤，這個原因是在Airbnb的eslint規則中，有一項no-param-reassign，這個規則是限制在一個函數裡面，不能修改傳進函數的參數，因為可能會導致該參數物件的屬性被覆蓋：

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

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

但在Vuex的情況下，是會修改到state：

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

這時就可以在rule中修改其eslint規則：

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

這樣一來就避免了Vuex和Esint的衝突。

完整.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-初稿

• ← Previous Post
• Next Post →