经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 软件/图像 » Visual Studio » 查看文章
VS Code 自动修改和保存 代码风格 == eslint+prettier
来源:cnblogs  作者:tiandong  时间:2019/6/17 9:08:07  对本文有异议

    最近因为用到VS Code,需要统一所有人的代码风格(前端语言js/html/css等,或者后端语言 go/python等也可以这么用)。

所以参考了一些网络资料,记录下设置步骤,以便后续查阅。

 

Step 1: npm 命令窗口,安装需要的插件

cmd >> npm i -D prettier

# eslint-plugin-prettier插件会调用prettier对你的代码风格进行检查,其原理是先使用prettier对你的代码进行格式化,

# 然后与格式化之前的代码进行对比,如果过出现了不一致,这个地方就会被prettier进行标记。

cmd >> npm i -D eslint-plugin-prettier

# eslint-config-prettier可以关闭eslint可能与prettier发生冲突的代码格式化规则。

# 官方称eslint-plugin-prettier需要与eslint-config-prettier搭配食用才能获得最佳效果。

cmd >> npm i -D eslint-config-prettier

 

Step 2: 创建react项目

cmd >> cd H:\0_VSCode_Work

cmd >> create-react-app my-app-03

# 打开项目

cmd >> cd ./my-app-03

cmd >> code .

 

Step 3: 创建项目的.eslintignore文件

# 文件路径 = MY-APP-03/.eslintignore

 

# 在vs code中手动创建文件后".eslintignore",输入如下文件内容。

  1. /build/
  2. /config/
  3. /dist/
  4. /*.js
  5. /test/unit/coverage/

 

Step 4: 创建项目的.eslintrc.js文件

# 文件路径 = MY-APP-03/src/.eslintrc.js

# 在vs code中手动创建文件后".eslintrc.js",输入如下文件内容。

  1. module.exports = {
  2. root: true,
  3. env: {
  4. browser: true,
  5. es6: true,
  6. node: true
  7. },
  8. extends: [
  9. 'standard',
  10. 'plugin:vue/essential',
  11. 'eslint:recommended',
  12. "plugin:prettier/recommended"
  13. ],
  14. rules: {
  15. "prettier/prettier": "error",
  16. // allow async-await
  17. 'generator-star-spacing': 'off',
  18. 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  19. // allow debugger during development
  20. 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  21. //强制使用单引号
  22. quotes: ['error', 'single'],
  23. //强制不使用分号结尾
  24. semi: ['error', 'never']
  25. },
  26. parserOptions: {
  27. parser: 'babel-eslint'
  28. }
  29. }

 

 

Step 5: 创建项目的.prettierrc文件

# 文件路径 = MY-APP-03/.prettierrc

# 在vs code中手动创建文件后".prettierrc",输入如下文件内容。

  1. {
  2. //一行的字符数,如果超过会进行换行,默认为80
  3. "printWidth": 80,
  4. //一个tab代表几个空格数,默认为80
  5. "tabWidth": 2,
  6. //是否使用tab进行缩进,默认为false,表示用空格进行缩减
  7. "useTabs": false,
  8. //字符串是否使用单引号,默认为false,使用双引号
  9. "singleQuote": false,
  10. //行位是否使用分号,默认为true
  11. "semi": true,
  12. //是否使用尾逗号,有三个可选值"<none|es5|all>"
  13. "trailingComma": "none",
  14. //对象大括号直接是否有空格,默认为true,效果:{ foo: bar }
  15. "bracketSpacing": true,
  16. //代码的解析引擎,默认为babylon,与babel相同
  17. "parser": "babylon",
  18. //开启 eslint 支持
  19. "eslintIntegration": true
  20. }

 

Step6 : 修改项目工作区设置文件.vscode/settings.json

 

# 单击IDE工具的左下角的齿轮,然后单击菜单"Settings", 在弹出的面板Settings中,选择子面板"Workspace",如下图

 

# 然后,找到参数"Files:Associations",单击按钮"Edit in setting.json"

# 然后,在settings.json文件中,输入和保存如下内容。

  1. {
  2. //.vue文件template格式化支持,并使用js-beautify-html插件
  3. "vetur.format.defaultFormatter.html": "js-beautify-html",
  4. //js-beautify-html格式化配置,属性强制换行
  5. "vetur.format.defaultFormatterOptions": {
  6. "js-beautify-html": {
  7. "wrap_attributes": "force-aligned"
  8. }
  9. },
  10. //根据文件后缀名定义vue文件类型
  11. "files.associations": {
  12. "*.vue": "vue"
  13. },
  14. //配置 ESLint 检查的文件类型
  15. "eslint.validate": [
  16. "javascript",
  17. "javascriptreact",
  18. {
  19. "language": "vue",
  20. "autoFix": true
  21. }
  22. ],
  23. //保存时eslint自动修复错误
  24. "eslint.autoFixOnSave": true,
  25. //保存自动格式化
  26. "editor.formatOnSave": true
  27. }

或者,少设置一些参数,如下

最后,记得保存settings.json文件

 

Step7 : 最后,我们测试一下效果

# 首先,创建一个demo.html文件,如下

文件路径 = MY-APP-03/public/demo.html

  1. <html>dafs
  2. <header>
  3. demo
  4. </header>
  5. <body>
  6. <div>乱写一气,----001
  7. </div>
  8. <div>乱写一气,----002
  9. </div>
  10. </body>
  11. </html>

# 然后,我们单击 快捷键"Ctrl+S" 或 菜单"Fiel >> Save All", 则IDE工具自动将上面格式混乱的代码转化为风格整洁的代码,如下图所示

 

原文链接:http://www.cnblogs.com/itshare/p/11028299.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号