vs Code + Eslint + Prettier 代码格式化(vue开发)
随心小宝 人气:0一、什么是Eslint
通过查看eslint官网(官网传送门),我们就可以知道,eslint就是一个用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具,主要用来检测代码风格是不是符合指定的规则/规范,这样有利于团队开发的时候代码风格统一,.毕竟每个人的代码风格不一致,使用eslint代码校验工具就保证了代码风格的统一性。
二、什么Prettier
通过查看prettier官网(官网传送门),我们就知道,prettier是一个代码格式化工具,包括JavaScript (including experimental features)、JSX、Angular、Vue、Flow、TypeScript、CSS, Less, and SCSS、HTML、JSON、GraphQL、Markdown, including GFM and MDX、YAML各种语言,简而言之,这个工具能够使输出代码保持风格一致。
三、vs Code安装相关插件
在这里我默认你已经安装好了vs Code,如果还没有安装后者不知道怎么安装也没关系,可以查看安装vs Code的其他博客,我这里不在赘述。vs Code安装好之后,这里要介绍几个常用的插件,可以灵活使用,以方便使用提高效率为原则。
1、Vetur: vue语法高亮插件;
2、ESlint
语法错误检测工具;
3、HTML Snippets
回车或按下Tab键生成标签;
4、Auto Rename Tag
自动修改匹配的标签;
5、prettier
代码格式化工具;
四、vs Code格式化相关配置
vs Code格式化插件有很多,这里首推prettier,可以根据自己的需求进行配置,并且设置format on save,就会在代码格式化的时候自动保存
{ "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_line_length": 200, "wrap_attributes": "auto", "end_with_newline": false } }, //分号 "prettier.semi": false, "prettier.singleQuote": true, //使用单引号替代双引号 "prettier.eslintIntegration": true, //函数前加空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, "vetur.format.defaultFormatter.js": "vscode-typescript", "eslint.alwaysShowStatus": true, "eslint.autoFixOnSave": true, "eslint.workingDirectories": [ ".eslintrc.js", { "mode": "auto" } ], "eslint.validate": [ "javascript", "javascriptreact", { "language": "vue", "autoFix": true } ], "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, //默认JavaScript格式化程序(为了更美观) "javascript.format.enable": true, "prettier.arrowParens": "avoid", }
五、eslint相关配置
eslint先关配置跟prettier结合起来,设置prettier的eslintIntegration属性为true,就可以根据eslint相关配置规则格式化代码,相关配置如下,更多配置规则请查看官网
// https://eslint.org/docs/user-guide/configuring module.exports = { root: true, parserOptions: { parser: 'babel-eslint' }, env: { browser: true // "jest":true }, // required to lint *.vue files plugins: ['vue'], extends: ['plugin:vue/essential', 'standard'], // add your custom rules here rules: { // allow async-await camelcase: 'off', 'no-console': 'error', 'standard/no-callback-literal': 'off', 'generator-star-spacing': 'off', 'space-before-function-paren': [ 'error', { anonymous: 'always', named: 'never', asyncArrow: 'never' } ], 'func-call-spacing': ['error', 'never'], 'vue/no-mutating-props': 'nerve', // allow debugger during development // 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': 'error', 'template-curly-spacing': 'off', quotes: ['error', 'single'], // 强制不使用分号结尾 semi: ['error', 'never'], indent: [ 'error', 2, { ignoredNodes: ['TemplateLiteral', 'ConditionalExpression'], SwitchCase: 1 } ] // end 解决eslint报错问题 } }
在setting.json中设置一下配置,可在格式化的时候自动安装eslint规则修复不符合规范的代码。
"eslint.validate": [ "javascript", "javascriptreact", { "language": "vue", "autoFix": true } ],
加载全部内容