vscode vue3+vite 配置eslint

vue2+webpack+eslint配置

目前主流项目都在使用vue3+vite,因此针对eslint的配置做了一下总结。

引入ESlint、pritter

安装插件,执行以下命令

// eslint
// prettier
// eslint-plugin-vue
// eslint-config-prettier
// eslint-plugin-prettier
yarn add  eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier --save-dev

执行上述命令,package.json 中 会自动添加以下内容


...
"dependencies": {
	"eslint": "^8.46.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.0",
    "eslint-plugin-vue": "^9.17.0",
    "prettier": "^3.0.1",
    ...
}


...

创建.eslintrc.js

在在根目录创建 .eslintrc.js 文件 (命令方式)

// 生成文件
vi .eslintrc.js

// 进入编辑模式
i 

// 报错更改
wq

.eslintrc.js 文件的内容

module.exports = {
  extends: [
    'plugin:vue/vue3-recommended',
    'prettier',
    'prettier/vue'
  ],
  plugins: ['vue', 'prettier'],
  rules: {
    'prettier/prettier': 'error'
  }
};

创建 .prettierrc.js 文件

在项目根目录下创建一个名为 .prettierrc.js 的文件,并添加以下内容

// semi(是否使用分号)
// singleQuote(是否使用单引号)
// trailingComma(是否使用尾逗号)
// printWidth(行的最大长度)
// tabWidth(缩进的空格数)
module.exports = {
  printWidth: 120,
  tabWidth: 2,
  useTabs: false,
  semi: false,
  singleQuote: true,
  quoteProps: 'as-needed',
  jsxSingleQuote: false,
  trailingComma: 'none',
  bracketSpacing: true,
  bracketSameLine: false,
  arrowParens: 'always',
  requirePragma: false,
  insertPragma: false,
  proseWrap: 'never',
  htmlWhitespaceSensitivity: 'strict',
  vueIndentScriptAndStyle: true,
  endOfLine: 'lf'
};


配置 VS Code 编辑器

安装 ESLint 和 Prettier - Code formatter (下图以Prettier - Code formatter 为例)
vscode vue3+vite 配置eslint_第1张图片

打开VS Code 的设置

重点提示:

记得一定选择工作区!!!
如果你的所有项目的技术栈都一致,那么可以选择用户
如果不一致 选择工作区,则会只影响当前项目

点击工作区,搜索 Preferences,找到Settings

"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[vue]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"eslint.validate": [
  "javascript",
  "javascriptreact",
  {
    "language": "vue",
    "autoFix": true
  }
]

保存后,项目的根目录会出现此文件
vscode vue3+vite 配置eslint_第2张图片

小结

统一代码风格:ESLint 和 Prettier 可以强制执行一致的代码风格规范,确保团队成员编写的代码风格一致,提高代码的可读性和可维护性。
检测潜在问题:ESLint 可以检测出代码中的潜在问题和错误,例如未声明的变量、未使用的变量、不必要的代码等,帮助开发者在开发过程中发现并修复这些问题。
自动格式化:Prettier 可以自动格式化代码,使代码保持一致的缩进、换行、引号等格式,减少手动调整代码格式的时间和工作量。

你可能感兴趣的:(vue,vite,eslint)