1、应用vite创立一个我的项目
执行命令: yarn create vite? Project name: 输出你的项目名称？（如: esvue）? Select a framework: 抉择装置的脚手架 (这里选vue) vanilla> vue reactDone. Now run: cd esvue yarn yarn dev2、装置EsLint
yarn add -D eslint3、初始化配置EsLint
npx eslint --init3.1、抉择模式： (To check syntax and find problems)
You can also run this command directly using 'npm init @eslint/config'.? How would you like to use ESLint? ... To check syntax only> To check syntax and find problems To check syntax, find problems, and enforce code style3.2、抉择语言模块： (选JavaScript modules)
? What type of modules does your project use? ...> JavaScript modules (import/export) CommonJS (require/exports) None of these3.3、抉择语言框架 (选Vue.js)
? Which framework does your project use? ... React> Vue.js None of these3.4、是否应用ts (视本人状况而定,我这里不必选No)
? Does your project use TypeScript? » No / Yes3.5代码在哪里运行 (用空格选中 Browser+Node)
? Where does your code run? ... (Press <space> to select, <a> to toggle all, <i> to invert selection)√ Browser√ Node3.6、您心愿您的配置文件是什么格局? (选JavaScript)
? What format do you want your config file to be in? ...> JavaScript YAML JSON3.7、您想当初装置它们吗? (抉择Yes)
? Would you like to install them now? » No / Yes3.8、您要应用哪个软件包管理器？ (抉择yarn)
? Which package manager do you want to use? ... npm> yarn pnpm4、装置实现后 (在我的项目根目录会呈现.eslintrc.js文件)
// .eslintrc.js 文件// 这里就是下面3步骤初始化的文件,前面的配置都写这里module.exports = { env: { browser: true, es2021: true, node: true }, extends: "eslint:recommended", parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, rules: { }}5、持续装置 vite-plugin-eslint
// 阐明: 该包是用于配置vite运行的时候自动检测eslint标准// 问题: 不装这个包能够吗? 答案是“能够的”,应用yarn dev时并不会被动查看代码yarn add -D vite-plugin-eslint6、持续装置 eslint-parser
yarn add -D @babel/core yarn add -D @babel/eslint-parser7、持续装置prettier (用于标准代码格局,不须要能够不装)
yarn add -D prettieryarn add -D eslint-config-prettier // eslint兼容的插件yarn add -D eslint-plugin-prettier // eslint的prettier8、配置 vite.config.js
import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import eslintPlugin from 'vite-plugin-eslint' //导入包export default defineConfig({ plugins: [ vue(), // 减少上面的配置项,这样在运行时就能查看eslint标准 eslintPlugin({ include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue'] }) ]})9、配置 .prettierrc
如果您没有装置第7步骤的那三个包,这个配置你能够疏忽跳过
这里次要配置代码的格局标准的,有些设置要与.eslintrc.js配置统一,避免抵触
// 在我的项目根目录创立文件 .prettierrc// 以下配置视本人状况而定,并步是每个都须要的{ tabWidth: 4, // 应用4个空格缩进 semi: false, // 代码结尾是否加分号 trailingComma: 'none', // 代码开端不须要逗号 singleQuote: true, // 是否应用单引号 printWidth: 100, // 超过多少字符强制换行 arrowParens: 'avoid', // 单个参数的箭头函数不加括号 x => x bracketSpacing: true, // 对象大括号内两边是否加空格 { a:0 } endOfLine: 'auto', // 文件换行格局 LF/CRLF useTabs: false, // 不应用缩进符,而应用空格 quoteProps: 'as-needed', // 对象的key仅在必要时用引号 jsxSingleQuote: false, // jsx不应用单引号,而应用双引号 jsxBracketSameLine: false, // jsx标签的反尖括号须要换行 rangeStart: 0, // 每个文件格式化的范畴是文件的全部内容 rangeEnd: Infinity, // 结尾 requirePragma: false, // 不须要写文件结尾的 @prettier insertPragma: false, // 不须要主动在文件结尾插入 @prettier proseWrap: 'preserve', // 应用默认的折行规范 htmlWhitespaceSensitivity: 'css' // 依据显示款式决定html要不要折行}10、配置 .eslintrc.js
module.exports = { "env": { "browser": true, "es2021": true, "node": true }, "extends": [ "eslint:recommended", // 应用举荐的eslint 'plugin:vue/vue3-recommended' // 应用插件反对vue3 // 如果你没有装置第7步,以下两个包不要引入,否则报错 'plugin:prettier/recommended', 'eslint-config-prettier' ], "parserOptions": { "ecmaVersion": 13, "sourceType": "module", "ecmaFeatures": { "modules": true, 'jsx': true }, "requireConfigFile": false, "parser": '@babel/eslint-parser' }, // eslint-plugin-vue 'plugins': [ 'vue' // 引入vue的插件 vue <==> eslint-plugin-vue // 这个包须要装置了第7步的三个包再引入 'prettier' // 引入标准插件 prettier <==> eslint-plugin-prettier ], 'globals': { defineProps: 'readonly', defineEmits: 'readonly', defineExpose: 'readonly', withDefaults: 'readonly' }, // 这里时配置规定的,本人看状况配置 "rules": { 'semi': ['warn', 'never'], // 禁止尾部应用分号 'no-console': 'warn', // 禁止呈现console 'no-debugger': 'warn', // 禁止呈现debugger 'no-duplicate-case': 'warn', // 禁止呈现反复case 'no-empty': 'warn', // 禁止呈现空语句块 'no-extra-parens': 'warn', // 禁止不必要的括号 'no-func-assign': 'warn', // 禁止对Function申明从新赋值 'no-unreachable': 'warn', // 禁止呈现[return|throw]之后的代码块 'no-else-return': 'warn', // 禁止if语句中return语句之后有else块 'no-empty-function': 'warn', // 禁止呈现空的函数块 'no-lone-blocks': 'warn', // 禁用不必要的嵌套块 'no-multi-spaces': 'warn', // 禁止应用多个空格 'no-redeclare': 'warn', // 禁止屡次申明同一变量 'no-return-assign': 'warn', // 禁止在return语句中应用赋值语句 'no-return-await': 'warn', // 禁用不必要的[return/await] 'no-self-compare': 'warn', // 禁止本身比拟表达式 'no-useless-catch': 'warn', // 禁止不必要的catch子句 'no-useless-return': 'warn', // 禁止不必要的return语句 'no-mixed-spaces-and-tabs': 'warn', // 禁止空格和tab的混合缩进 'no-multiple-empty-lines': 'warn', // 禁止呈现多行空行 'no-trailing-spaces': 'warn', // 禁止一行完结前面不要有空格 'no-useless-call': 'warn', // 禁止不必要的.call()和.apply() 'no-var': 'warn', // 禁止呈现var用let和const代替 'no-delete-var': 'off', // 容许呈现delete变量的应用 'no-shadow': 'off', // 容许变量申明与外层作用域的变量同名 'dot-notation': 'warn', // 要求尽可能地应用点号 'default-case': 'warn', // 要求switch语句中有default分支 'eqeqeq': 'warn', // 要求应用 === 和 !== 'curly': 'warn', // 要求所有管制语句应用统一的括号格调 'space-before-blocks': 'warn', // 要求在块之前应用统一的空格 'space-in-parens': 'warn', // 要求在圆括号内应用统一的空格 'space-infix-ops': 'warn', // 要求操作符四周有空格 'space-unary-ops': 'warn', // 要求在一元操作符前后应用统一的空格 'switch-colon-spacing': 'warn', // 要求在switch的冒号左右有空格 'arrow-spacing': 'warn', // 要求箭头函数的箭头前后应用统一的空格 'array-bracket-spacing': 'warn', // 要求数组方括号中应用统一的空格 'brace-style': 'warn', // 要求在代码块中应用统一的大括号格调 'camelcase': 'warn', // 要求应用骆驼拼写法命名约定 'indent': ['warn', 4], // 要求应用JS统一缩进4个空格 'max-depth': ['warn', 4], // 要求可嵌套的块的最大深度4 'max-statements': ['warn', 100], // 要求函数块最多容许的的语句数量20 'max-nested-callbacks': ['warn', 3], // 要求回调函数最大嵌套深度3 'max-statements-per-line': ['warn', { max: 1 }], // 要求每一行中所容许的最大语句数量 "quotes": ["warn", "single", "avoid-escape"], // 要求对立应用单引号符号 "vue/require-default-prop": 0, // 敞开属性参数必须默认值 "vue/singleline-html-element-content-newline": 0, // 敞开单行元素必须换行符 "vue/multiline-html-element-content-newline": 0, // 敞开多行元素必须换行符 // 要求每一行标签的最大属性不超五个 'vue/max-attributes-per-line': ['warn', { singleline: 5 }], // 要求html标签的缩进为须要4个空格 "vue/html-indent": ["warn", 4, { "attribute": 1, "baseIndent": 1, "closeBracket": 0, "alignAttributesVertically": true, "ignores": [] }], // 勾销敞开标签不能自闭合的限度设置 "vue/html-self-closing": ["error", { "html": { "void": "always", "normal": "never", "component": "always" }, "svg": "always", "math": "always" }] }}11、配置VScode
1、装置“ESLint”插件【作者: Microsoft】
2、装置“Prettier ESLint”插件 【作者：Rebecca Vest】
// 配置vscode// 关上：设置 -> 文本编辑器 -> 字体 -> 在 settings.json 中编辑// settings.json文件{ // vscode默认启用了依据文件类型主动设置tabsize的选项 "editor.detectIndentation": false, // 从新设定tabsize "editor.tabSize": 2, // 每次保留的时候主动格式化 "editor.formatOnSave": true, // 每次保留的时候将代码按eslint格局进行修复 "eslint.autoFixOnSave": true, // 增加vue反对 "eslint.validate": [ "javascript", "javascriptreact", { "language": "vue", "autoFix": true } ], // #让prettier应用eslint的代码格局进行校验 "prettier.eslintIntegration": true}12、其它 (整个流程下来装置的包)
"devDependencies": { // eslint解析相干的包 "@babel/core": "^7.18.2", "@babel/eslint-parser": "^7.18.2", // eslint相干的包 "eslint": "^8.17.0", "eslint-plugin-vue": "^9.1.0", "vue-eslint-parser": "^9.0.2", "vite-plugin-eslint": "^1.6.1", // prettier相干的包 "prettier": "^2.6.2", "eslint-config-prettier": "^8.5.0", "eslint-plugin-prettier": "^4.0.0", }13、寄语
集体不太喜爱prettier, 有时候还是喜爱依照本人的格局
比如说有很多配置项,我须要在每个配置加上正文,并且让正文对齐,
如果你应用了prettier你的正文是没方法对齐的,会主动缩回去