YAML JSON
###### 9）您现在要安装它们吗 （Yes）
Checking peerDependencies of eslint-config-standard@latest The config that you've selected requires the following dependencies:
eslint-plugin-vue@latest eslint-config-standard@latest eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 || ^16.0.0 eslint-plugin-promise@^6.0.0
? Would you like to install them now? › No / Yes
###### 10）您要使用哪个软件包管理器？ (选择yarn)
? Which package manager do you want to use? ... npm yarn
pnpm
安装完成后 (在项目根目录会出现.eslintrc.cjs或.eslintrc.js文件）（如果是.eslintrc.js则需要将文件名改为.eslintrc.cjs防止后面可能报错)（文件名的生成规则是根据package.json中type字段属性来的如果是"type": “module” 则生成.eslintrc.cjs，如果不指定或"type":"commonjs"则生成.eslintrc.js）
###### .eslintrc.cjs文件内容
### （具体配置信息会在最后附上）
module.exports = { env: { browser: true, es2021: true, node: true }, extends: [ 'standard', 'plugin:vue/vue3-essential' ], overrides: [ { env: { node: true }, files: [ '.eslintrc.{js,cjs}' ], parserOptions: { sourceType: 'script' } } ], parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, plugins: [ 'vue' ], rules: { } }
##### 第三步 安装 vite-plugin-eslint
// 该包是用于配置vite运行的时候自动检测eslint规范，不符合页面会报错 pnpm add vite-plugin-eslint@latest -D // 安装最新版eslint-plugin-vue pnpm add eslint-plugin-vue@latest -D
##### 配置 vite.config.js
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' import eslint from 'vite-plugin-eslint'
export default defineConfig({ // 增加eslint的配置项,这样在运行时就能检查eslint规范 // eslint() 或 // eslint({ // 指定需要检查的文件 // include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue'] // }) plugins: [vue(), eslint()], resolve: { // 指定@别名 alias: { '@': path.resolve(__dirname, 'src') } }, server: { port: 3300, cors: true, proxy: {} }, build: { outDir: path.resolve(__dirname, '../dist') } })
##### 第四步安装 eslint-parser （ESLint解析器）
pnpm add @babel/core -D // 某些代码需要调用 Babel 的 API 进行转码，就要使用@babel/core模块。 pnpm add @babel/eslint-parser@latest -D
##### 第五步 安装prettier (用于规范代码格式)
pnpm add prettier -D pnpm add prettier-eslint -D pnpm add eslint-config-prettier -D // eslint兼容的插件 pnpm add eslint-plugin-prettier -D // eslint的prettier
##### 第六步配置prettier
在项目根目录创建文件 .prettierrc.cjs
// 以下配置视自己情况而定 module.exports = { tabWidth: 2, // 使用2个空格缩进 useTabs: false, // 不使用制表缩进,而使用空格 semi: false, // 代码结尾是否加分号 trailingComma: 'none', // 代码末尾不需要逗号 参考 prettier.io/docs/en/opt… singleQuote: true, // 是否使用单引号 printWidth: 120, // 超过多少字符强制换行 arrowParens: 'avoid', // 单个参数的箭头函数不加括号 arg => arg bracketSpacing: true, // 对象大括号内两边是否加空格 { a:0 } endOfLine: 'auto', // 文件换行格式 LF/CRLF quoteProps: 'as-needed', // 对象的key仅在必要时用引号 jsxSingleQuote: false, // jsx不使用单引号,而使用双引号 jsxBracketSameLine: false, // jsx标签的反尖括号需要换行 rangeStart: 0, // 每个文件格式化的范围是文件的全部内容 rangeEnd: Infinity, // 结尾 requirePragma: false, // 不需要写文件开头的 @prettier insertPragma: false, // 不需要自动在文件开头插入 @prettier proseWrap: 'preserve', // 使用默认的折行标准 参考 prettier.io/docs/en/opt… htmlWhitespaceSensitivity: 'css' // 根据显示样式决定html要不要折行 }
##### 第七步配置配置 .eslintrc.cjs
// 在rules里面简单的一些配置： // "off" 或 0 - 关闭规则 // "warn" 或 1 - 开启规则，使用警告级别的错误 // "error" 或 2 - 开启规则，使用错误级别的错误 module.exports = { "env": { "browser": true, "es2021": true, "node": true }, "extends": [ "eslint:recommended", // 使用推荐的eslint 'plugin:vue/vue3-recommended', // 使用插件支持vue3 // 接入 prettier 的规则 '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 'prettier' // 引入规范插件 prettier <==> eslint-plugin-prettier ], 'globals': { defineProps: 'readonly', defineEmits: 'readonly', defineExpose: 'readonly', withDefaults: 'readonly' }, // 这里时配置规则的,自己看情况配置 // 这里可以进行自定义规则配置 // key：规则代号 // value：具体的限定方式 // "off" or 0 - 关闭规则 // "warn" or 1 - 将规则视为一个警告（不会影响退出码）,只警告，不会退出程序 // "error" or 2 - 将规则视为一个错误 (退出码为1)，报错并退出程序 rules: { // 自定义规则 - 其实上面集成后有很多内置的规则, 这里可以进行规则的一些修改 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 上线环境用打印就报警告, 开发环境关闭此规则 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // debugger可以终止代码执行 'vue/multi-word-component-names': 'off', // 自定义组件名称应该由多单词大驼峰命名组成，防止和html标签冲突 --- 关闭 'vue/max-attributes-per-line': [ 2, // 多个特性的元素应该分多行撰写，每个特性一行 { singleline: 10, multiline: { max: 1 } } ], 'vue/prop-name-casing': [1, 'camelCase'], // 在声明prop的时候，其命名应该始终使用驼峰命名 'vue/require-v-for-key': 1, // 给v-for设置键值，与key结合使用，可以高效的更新虚拟DOM 'vue/no-use-v-if-with-v-for': [ 2, { allowUsingIterationVar: false } ], // 不要把 v-if 和 v-for 用在同一个元素上——因为v-for 比 v-if 具有更高的优先级 'vue/order-in-components': [ 1, { // 组件/实例的选项的顺序 order: [ 'el', 'name', 'parent', 'functional', ['delimiters', 'comments'], ['components', 'directives', 'filters'], 'extends', 'mixins', 'inheritAttrs', 'model', ['props', 'propsData'], 'data', 'computed', 'watch', 'LIFECYCLE_HOOKS', 'methods', ['template', 'render'], 'renderError' ] } ], // // // /// js.规范 / // / 'arrow-spacing': [ 2, { // 在箭头函数之前/之后需要空格 before: true, after: true } ], camelcase: [ 0, { // 需要驼峰命名 properties: 'always' } ], 'comma-dangle': [0, 'never'], // 要求或禁止使用尾随逗号；最后一个属性是不需要逗号 'comma-spacing': [ 2, { // 强制逗号旁边的间距： 左右一个空格 before: false, after: true } ], 'comma-style': [2, 'last'], // 逗号风格 'constructor-super': 2, // 构建方法中使用super方法 curly: [2, 'multi-line'], 'dot-location': [1, 'property'], // 在dot之前和之后强制换行 'eol-last': 2, // 在文件末尾要求或禁止换行 eqeqeq: [1, 'always', { null: 'ignore' }], // 是否使用全等 indent: [ 'off', 2, { // 强制执行一致的缩进 SwitchCase: 1 } ], 'jsx-quotes': [2, 'prefer-single'], // 强制在JSX文件中一致使用单引号 'keyword-spacing': [ 2, { // 关键字前后强制执行一致的间距 before: true, after: true } ], 'new-cap': [ 2, { // 要求构造函数名称以大写字母开头 newIsCap: true, capIsNew: false } ], 'new-parens': 2, // 调用不带参数的函数时需要括号 'no-array-constructor': 2, // 禁止阵列构建器 'no-class-assign': 2, // 禁止修改类声明的变量 'no-cond-assign': 2, // 在条件语句中禁止赋值运算符 'no-const-assign': 2, // 禁止修改使用const声明的变量 'no-control-regex': 0, // 禁止正则表达式中的控制字符 'no-delete-var': 2, // 禁止删除变量 'no-dupe-args': 2, // 在函数定义中禁止重复参数 'no-dupe-class-members': 2, // 禁止在类成员中重复名称 'no-dupe-keys': 2, // 禁止对象重复声明属性 'no-duplicate-case': 2, // 规则禁止重复案例标签 'no-empty-character-class': 2, // 禁止在正则表达式中使用空字符类 'no-empty-pattern': 2, // 不允许空的解构模式 'no-eval': 2, // 禁止使用eval（） 'no-ex-assign': 2, // 禁止在catch子句中重新分配异常 'no-extend-native': 2, // 禁止扩展原生对象 'no-extra-bind': 2, // 禁止不必要的功能绑定 'no-extra-boolean-cast': 2, // 禁止不必要的布尔类型转换 'no-extra-parens': [2, 'functions'], // 禁止不必要的括号 'no-func-assign': 2, // 禁止重新分配函数声明 'no-implied-eval': 2, 'no-inner-declarations': [2, 'functions'], // 禁止嵌套块中的变量或函数声明 'no-invalid-regexp': 2, // 禁止在RegExp中使用无效的正则表达式字符串 'no-irregular-whitespace': 2, // 不允许不规则的空白 'no-iterator': 2, // 禁止迭代器 'no-label-var': 2, // 禁止变量名称的标签 'no-labels': [ 2, { allowLoop: false, allowSwitch: false } ], 'no-lone-blocks': 2, // 禁止不必要的嵌套块 'no-mixed-spaces-and-tabs': 2, // 禁止使用混合空格和制表符进行缩进 'no-multi-spaces': 2, // 禁止多个空格 'no-multi-str': 2, // 禁止多行字符串 'no-multiple-empty-lines': [ 2, { // 禁止多个空行 max: 1 } ], 'no-native-reassign': 2, 'no-negated-in-lhs': 2, 'no-new-object': 2, 'no-new-require': 2, 'no-new-symbol': 2, 'no-new-wrappers': 2, 'no-obj-calls': 2, 'no-octal': 2, 'no-octal-escape': 2, 'no-path-concat': 2, 'no-proto': 2, 'no-redeclare': 2, 'no-regex-spaces': 2, 'no-return-assign': [2, 'except-parens'], 'no-self-assign': 2, 'no-self-compare': 2, 'no-sequences': 2, 'no-shadow-restricted-names': 2, 'no-spaced-func': 2, 'no-sparse-arrays': 2, 'no-this-before-super': 2, 'no-throw-literal': 2, 'no-trailing-spaces': 2, 'no-undef': 0, 'no-undef-init': 2, 'no-unexpected-multiline': 2, 'no-unmodified-loop-condition': 2, // 禁止未修改的循环条件 'no-unneeded-ternary': [ 2, { // 当存在更简单的替代方案时，不允许三元运算符 defaultAssignment: false } ], 'no-unreachable': 2, // 返回，抛出，继续和中断语句后禁止无法访问的代码 'no-unsafe-finally': 2, // 禁止finally块中的控制流语句 'no-unused-vars': [ 1, { // 禁止使用未声明的变量 vars: 'all', args: 'none' } ], 'no-useless-call': 2, // 禁止不必要的call()和apply()方法 'no-useless-computed-key': 2, // 禁止在对象上使用不必要的计算属性键 'no-useless-constructor': 2, // 禁止不必要的构造方法 'no-useless-escape': 0, // 禁止不必要的转义用法 'no-whitespace-before-property': 2, // 在属性之前禁止空格 'no-with': 2, 'linebreak-style': [0, 'error', 'windows'], 'one-var': [ 2, { initialized: 'never' } ], 'operator-linebreak': [ 2, 'after', { // 为维护强制执行一致的换行方式 overrides: { '?': 'before', ':': 'before' } } ], 'padded-blocks': [2, 'never'], // 在块内要求或禁止填充 quotes: [ 2, 'single', { avoidEscape: true, allowTemplateLiterals: true } ], semi: [2, 'never'], 'semi-spacing': [ 2, { before: false, after: true } ], 'space-before-blocks': [2, 'always'], // 不要存在多余的块空间 'space-in-parens': [2, 'never'], 'space-infix-ops': 2, 'space-unary-ops': [ 2, { words: true, nonwords: false } ], 'spaced-comment': [ 2, 'always', { markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] } ], 'template-curly-spacing': [2, 'never'], 'use-isnan': 2, 'valid-typeof': 2, 'wrap-iife': [2, 'any'], 'yield-star-spacing': [2, 'both'], yoda: [2, 'never'], 'prefer-const': 1, 'object-curly-spacing': [ 2, 'always', { objectsInObjects: false } ], 'array-bracket-spacing': [2, 'never'], 'prettier/prettier': ['error', { endOfLine: 'auto' }] // 忽略换行格式的检查 } }
##### 第八步配置VScode
1、安装“ESLint”插件
2、安装“Prettier ESLint”插件
// 配置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 }
### 至此Vue3 + Vite + js + ESlint + Prettier就配置完成，此时先不急着运行项目，先把。node\_modules包和pnpm-lock.yaml删除掉再重新安装依赖包，防止有些依赖包手动降低或升级版本带来的报错
pnpm i 或 npm i 或
最后前端到底应该怎么学才好？
如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。
不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。
