Vue.js是一個前端框架，使用起來非常靈活，同時也需要嚴格的代碼規范來保證代碼質量和可維護性。其中，ESLint是一款非常流行的代碼檢查工具，可以用來發現代碼錯誤、統一代碼風格等。本文將介紹一些Vue.js項目中常用的ESLint規則。

// .eslintrc.js 文件內容
module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/essential',
'eslint:recommended'
],
plugins: [
'vue'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'vue/no-unused-components': 'error',
'vue/no-unused-vars': 'error'
},
parserOptions: {
parser: 'babel-eslint'
}
}

首先，我們要配置 .eslintrc.js 文件來應用 ESLint 規則。以上配置中，我們使用了 'plugin:vue/essential' 和 'eslint:recommended' 擴展（extends），并配置了一些規則，比如不能在生產環境使用 console 和 debugger，不能有未使用的組件和變量。

除此之外，我們也可以通過 No unused vars 和 No unused components 規則來檢查未使用的變量和組件，以避免代碼冗余和垃圾代碼帶來的問題。

// .vue 文件內容
<template><div>hello world</div></template><script>export default {
name: "HelloWorld",
methods: {
handleClick() {
console.log('click')
}
}
}
</script><style scoped>div {
color: red;
}
</style>

同時，我們還可以通過 .vue 文件中的 scoped 屬性來開啟樣式隔離和作用域。這樣，我們就可以避免樣式的污染和影響。

以上是 Vue.js 項目中常用的 ESLint 規則，我們可以根據自己項目的需求進行配置，使我們的代碼更加規范和易讀。