安装eslint
npm i eslint -D
生成配置文件：eslint.cjs
npx eslint --init
module.exports = {
"env": {
"browser": true,
"es2021": true
},
"extends": [ //eslint全部默认规则是关闭的，这个配置项开启推荐规则，推荐规则参照文档
"eslint:recommended",
"plugin:vue/vue3-essential", //vue3语法规则
"plugin:@typescript-eslint/recommended" //ts语法规则
],
"overrides": [
],
"parser": "@typescript-eslint/parser",
"parserOptions": { //指定解析器选项
"ecmaVersion": "latest", //校验ECMA最新版本
"sourceType": "module" //设置为"script"(默认)，或者"module"代码在ECMAScript模块中
},
"plugins": [ //Eslint支持使用第三方插件，在使用插件之前，你必须使用npm安装它
"vue", //改elsint-plugin-前缀可以从插件名称被省略
"@typescript-eslint"
],
"rules": {
}
}
vue3环境代码校验插件
# 让所有与prettier规则存在冲突的Eslint rules失效，并使用prettier进行代码检查
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-node": "^11.1.0",
# 运行更漂亮的Eslint，使prettier规则优先级更高，Eslint优先级低
"eslint-plugin-prettier": "^4.2.1",
# vue.js的Eslint插件（查找vue语法错误，发现错误指令，查找违规风格指南
"eslint-plugin-vue": "^9.9.0",
# 该解析器允许使用Eslint校验所有babel code
"@babel/eslint-parser": "^7.19.1",
npm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser
修改.eslintrc.cjs配置文件
// @see https://eslint.bootcss.com/docs/rules/
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
jest: true,
},
/* 指定如何解析语法 */
parser: 'vue-eslint-parser',
/** 优先级低于 parse 的语法解析配置 */
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
parser: '@typescript-eslint/parser',
jsxPragma: 'React',
ecmaFeatures: {
jsx: true,
},
},
/* 继承已有的规则 */
extends: [
'eslint:recommended',
'plugin:vue/vue3-essential',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended',
],
plugins: ['vue', '@typescript-eslint'],
/*
* "off" 或 0 ==> 关闭规则
* "warn" 或 1 ==> 打开的规则作为警告（不影响代码执行）
* "error" 或 2 ==> 规则作为一个错误（代码不能执行，界面报错）
*/
rules: {
// eslint（https://eslint.bootcss.com/docs/rules/）
'no-var': 'error', // 要求使用 let 或 const 而不是 var
'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-unexpected-multiline': 'error', // 禁止空余的多行
'no-useless-escape': 'off', // 禁止不必要的转义字符
//"prettier/prettier": "off",
// typeScript (https://typescript-eslint.io/rules)
'@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量
'@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore
'@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。
'@typescript-eslint/semi': 'off',
// eslint-plugin-vue (https://eslint.vuejs.org/rules/)
'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词
'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用
'vue/no-mutating-props': 'off', // 不允许组件 prop的改变
'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式
},
}
在项目根目录下新建.eslintignore忽略文件
dist
node_modules
在项目根目录下新建.eslintignore忽略文件
dist
node_modules
配置prettier
npm install -D eslint-plugin-prettier prettier eslint-config-prettier
prettierrc.json添加规则
{
"singleQuote": true,
"semi": false,
"bracketSpacing": true,
"htmlWhitespaceSensitivity": "ignore",
"endOfLine": "auto",
"trailingComma": "all",
"tabWidth": 2
}
.prettierignore忽略文件
/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*
项目根目录创建.vscode
增加settings.json文件，settings的具体内容如下：
{
"eslint.enable": true,
"eslint.codeAction.showDocumentation": {
"enable": true
},
"eslint.validate": [
"javascript",
"typescript",
"javascriptreact",
"typescriptreact",
"html",
"vue"
],
"typescript.validate.enable": true,
"javascript.validate.enable": true,
// 这里配置eslint和stylelint和prettier的自动格式化
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true, // 开启eslint 保存自动检测
"source.fixAll.stylelint": true // 开启 Stylelint 保存自动检测
},
"workbench.iconTheme": "material-icon-theme",
"workbench.colorTheme": "Community Material Theme Palenight High Contrast",
"editor.fontFamily": "mononoki",
"liveServer.settings.donotShowInfoMsg": true,
"git.ignoreMissingGitWarning": true,
"typescript.updateImportsOnFileMove.enabled": "always",
// 当按tab键的时候，会自动提示
"emmet.triggerExpansionOnTab": true,
"emmet.showAbbreviationSuggestions": true,
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
"js/ts.implicitProjectConfig.checkJs": true,
"workbench.startupEditor": "none",
"stylelint.packageManager": "yarn",
"[scss]": {
"editor.defaultFormatter": "stylelint.vscode-stylelint"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"workbench.commandPalette.preserveInput": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"editor.detectIndentation": false,
"[css]": {
"editor.defaultFormatter": "stylelint.vscode-stylelint"
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
// Stylelint 校验文件
"stylelint.validate": ["css", "scss", "vue", "html", "tsx"],
"[typescript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"prettier.printWidth": 120,
"vue3snippets.printWidth": 120,
"vue3snippets.tabWidth": 4,
"[xml]": {
"editor.defaultFormatter": "redhat.vscode-xml"
},
"scss.lint.unknownAtRules": "ignore",
"css.lint.unknownAtRules": "ignore",
"[dart]": {
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.rulers": [80],
"editor.selectionHighlight": false,
"editor.suggestSelection": "first",
"editor.tabCompletion": "onlySnippets",
"editor.wordBasedSuggestions": false
},
"editor.formatOnSave": true,
"eslint.format.enable": true
}
