Vue项目中使用ellint和prettier-规范和约束我们的代码

"jsxBracketSameLine": false, // 箭头函数参数括号 默认avoid 可选 avoid| always // avoid 能省略括号的时候就省略 例如x => x // always 总是有括号 "arrowParens": "avoid"}

eslint

1.项目根目录新建​​.eslintrc.js​​文件

module.exports = { root: true, env: { node: true, }, extends: [ 'plugin:vue/vue3-essential', //vue3核心的lint的规则 'eslint:recommended', //eslint的建议规则 '@vue/typescript/recommended', '@vue/prettier', //prettier建议的规则 // '@vue/prettier/@typescript-eslint', ], parserOptions: { ecmaVersion: 2020, }, rules: { semi: [1, 'never'],//always（总是） 或者 never（从来不） 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'prettier/prettier': [ 'warn', { trailingComma: 'es5', }, ], }, overrides: [ { files: [ '**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)', ], env: { jest: true, }, }, ],};

2.选项说明

"root": true

默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录。如果发现配置文件中有 “root”: true，它就会停止在父级目录中寻找。

extends: [ 'plugin:vue/vue3-essential', //vue3核心的lint的规则 'eslint:recommended', //eslint的建议规则 '@vue/typescript/recommended', '@vue/prettier', //prettier建议的规则 '@vue/prettier/@typescript-eslint', ],

一个配置文件可以从基础配置中继承已启用的规则。如上，如果值为字符串数组则每个配置继承它前面的配置。值为 “eslint:recommended” 的 extends 属性启用了eslint默认的规则，请参考：​​{ semi: [2, 'always'], 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'prettier/prettier': [ 'warn', { trailingComma: 'es5', }, ], },

ESLint 附带有大量的规则。你可以在rules选项中设置，设置的规则将覆盖上面继承的默认规则。要改变一个规则设置，你必须将规则 ID 设置为下列值之一：“off” 或 0 - 关闭规则“warn” 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)“error” 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)3.看一个例子： 我上面在rules里面配置了​​​semi: [1, 'never'],​​，意思就是禁止使用尾部分号，但是级别是警告，那么我如果项目中尾部有分号，我控制台就会报警告信息

那如果我改成​​semi:[2,'never']​​的时候，意思就是尾部禁止使用分号，但是级别变成错误那么我如果项目中尾部有分号，我程序就会报错，终止执行

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。